body{
  margin: 0;
}


.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 70px 0;
  width: 100%;
  background: url(https://c.animaapp.com/m9uz21znYI6vEZ/img/-------------------.png)
    50% 50% / cover;
}

.hero-content {
  display: flex;
  flex-direction: column;
  width: 1179px;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
}

.hero-logo {
  width: 156px;
  height: 72px;
  object-fit: cover;
}

.hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 42px;
  width: 100%;
}

.hero-image {
  width: 476px;
  height: 260px;
  object-fit: cover;
}

.hero-description {
  width: 973px;
  font-family: "IBM Plex Sans", Helvetica;
  font-weight: 600;
  color: var(--mainblack);
  font-size: 30px;
  line-height: 39px;
}

.section-header {
  position: relative;
  width: 1084px;
  height: 114px;
  margin-bottom: 42px;
}

.section-title {
  font-family: "IBM Plex Serif", Helvetica;
  font-weight: 600;
  color: #322708;
  font-size: 44px;
  line-height: 48px;
    background-color: white;

    transition: all 0.2s linear 0.05s;
    box-decoration-break: clone;
  padding: 0 20px;

}
.event-content,
.story-content,
.memories-content,
.museum-content {
  display: flex;
  width: 1082px;
  align-items: center;
  justify-content: space-between;
}

.event-description,
.story-text,
.memories-text,
.museum-description {
  width: 524px;
}

.divider {
  width: 100px;
  height: 6px;
  background-color: #655b40;
  margin-bottom: 32px;
}
.event-description p,
.story-text p,
.memories-text p,
.museum-description p {
  font-family: "IBM Plex Sans", Helvetica;
  font-weight: 500;
  color: #000000;
  font-size: 22px;
  line-height: 29.7px;
  margin-bottom: 32px;
}

.btn-details {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 44px;
  background-color: #655b40;
  font-family: "IBM Plex Sans", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 22px;
  text-decoration: none;
}

.btn-light {
  background-color: #ffffff;
  color: #322708;
}

.event-image,
.story-image,
.memories-image,
.museum-image {
  width: 420px;
  height: 364px;
  background-size: cover;
  background-position: center;
}
.story-title,
.memories-title {
  font-family: "IBM Plex Serif", Helvetica;
  font-weight: 600;
  font-size: 44px;
  line-height: 56.3px;
  margin-bottom: 42px;
}

.story-title {
  color: #322709;
}

.memories-title {
  color: #ffffff;
}

.memories-text p {
  color: #ffffff;
}

@media (max-width: 1200px) {

  .hero-content,
  .section-header,
  .event-content,
  .story-content,
  .memories-content,
  .museum-content {
    width: 100%;
  }

  .hero-description,
  .section-title,
  .event-description,
  .story-text,
  .memories-text,
  .museum-description {
    width: 100%;
  }

  .event-image,
  .story-image,
  .memories-image,
  .museum-image {
    width: 100%;
    max-width: 420px;
    height: auto;
    aspect-ratio: 420 / 364;
  }
}


section{
  padding: 113px 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
section.type-narrow .section-inner{
  max-width: 1144px;
  margin-right: auto;
  margin-left: auto;

}

.text-picture{
  display: flex;
  margin-top: 32px;

}
section.type-narrow .text-picture{
  align-items: center;
  justify-content: space-between;
}
.text{
  order: 1;
  color: #000;
  font-family: "IBM Plex Sans";
  font-size: 22px;
  font-style: normal;
  font-weight: 500;
  line-height: 135%; /* 29.7px */
  letter-spacing: 0.22px;
  max-width: 524px;
}
.picture{
  order: 1;
}
section.picture-left .text-picture .picture{
  order: 0;
}
section.type-wide.picture-right .text-picture{
  justify-content: flex-end;
}
section.type-wide .text-picture{
  gap: 128px;
}
.button-wrap a{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 44px;
  background: #655B40;
  max-width: 135px;
  color: #FFF;
  font-family: "IBM Plex Sans";
  font-size: 22px;
  font-style: normal;
  font-weight: 500;
  line-height: 135%; /* 29.7px */
  letter-spacing: 0.22px;
  text-decoration: none;
  margin-top: 42px;
}
.button-wrap a:hover{
  opacity: 0.9;
}
.type-narrow .section-title{
  margin-bottom: 42px;
}
.type-wide .section-title{
  margin-bottom: 32px;
}
.type-wide .anons{
  margin-top: 32px;
}
.line-under{
  width: 100px;
  height: 6px;
  background: #655B40;
  margin-bottom: 32px;
}

.block-id-89104 .section-title{

}
.block-id-89104 .anons{

}
.block-id-89107 .button-wrap a{
  background: #FFF;
  color: #322709;
}

.block-id-89108 .section-title{
  background: #63000B;
  color: white;
}
.block-id-89108 .anons{
  color: white;
}

.block-id-89108 .section-title{
  background: #63000B;
  color: white;
}
.block-id-89112 .anons{
  color: white;
}
.block-id-89110 .button-wrap a{
  background: #FFF;
  color: #322709;
}

.block-id-89110 .section-title{
  background: #364024;
  color: white;
}
.block-id-89110 .anons{
  color: white;
}

/* 1400px and below */
@media only screen and (max-width: 1400px) {
  .section-title {
    font-size: 38px;
  }
  .type-wide .picture img {
    max-width: 542px;
  }
  .anons {
    font-size: 22px !important;
  }
}

/* 768px and below */
@media only screen and (max-width: 768px) {
  .text-picture {
    flex-direction: column!important;
    gap: 32px!important;
  }
  img{
    max-width: 100%!important;
  }
  .section-title {
    font-size: 30px;
   text-align: center;
  }
  .hero-image{
    width: 90%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-description{
    text-align: center;
    font-size: 20px;
    line-height: 130%;
  }
  .hero-logo{
    margin-left: auto;
    margin-right: auto;
  }
  section{
    padding: 50px 16px;
  }
}
html{
  overflow-x: hidden;
}