.Section {
  padding: var(--sectionPaddingTop) var(--sectionHorizontalPadding)
    var(--sectionPaddingBottom);
  --sectionPaddingTop: 80px;
  --sectionPaddingBottom: 80px;
  --sectionHorizontalPadding: 24px;
  --sectionContainerMaxWidth: 1110px;
  --sectionContentMaxWidth: 445px;
  --sectionContainerHorizontalPadding: 50px;
  --bookingHeroSectionPaddingTop: 56px;
  --bookingHeroSectionPaddingBottom: 228px;
  --bookingHeroSectionHorizontalPadding: 24px;
  --featuresOverlapWidth: 74px;
  --bookingHeroZindex: 50;
  --reservationContainerZindex: 100;
  width: 100%;
}

.Section--light {
  background-color: var(--color-white);
  color: var(--color-ebony-clay);
}

.Section--dark {
  background-color: var(--color-cod-gray);
  color: var(--color-white);
}

.Section__container {
  margin: 0 auto;
  width: 100%;
  max-width: var(--sectionContainerMaxWidth);
  display: grid;
  grid-template-areas:
    "section-image"
    "section-content";
  justify-content: center;
  justify-items: center;
  gap: 42px;
}

.Section__container picture {
  grid-area: section-image;
}

.Section__image {
  grid-area: section-image;
  display: block;
  width: 100%;
  object-fit: contain;
  box-shadow: 0 75px 100px -50px var(--color-img-shadow);
}

.Section__content {
  grid-area: section-content;
  width: 100%;
  display: grid;
  gap: 36px;
  justify-items: center;
  align-items: center;
  grid-auto-rows: auto;
}

.Section__text {
  width: 100%;
  text-align: center;
  display: grid;
  gap: 13px;
}

.Section__title {
  font: var(--fontHeadingL-mobile);
  letter-spacing: -0.4px;
}

.Section__subtitle {
  display: block;
}

.Section__description {
  font: var(--fontBody2);
}

@media (min-width: 500px) {
  .Section__container {
    padding-left: var(--sectionContainerHorizontalPadding);
    padding-right: var(--sectionContainerHorizontalPadding);
    gap: 56px;
  }

  .Section__content {
    gap: 39px;
  }

  .Section__text {
    gap: 27px;
    width: 457px;
  }

  .Section__title {
    font: var(--fontHeadingL);
    letter-spacing: -0.5px;
  }

  .Section__description {
    font: var(--fontBody1);
  }
}

@media (min-width: 1200px) {
  .Section__container {
    grid-auto-columns: auto auto;
    grid-template-areas: "section-image section-content";
    align-items: center;
    padding-left: 0;
    padding-right: 0;
    gap: 125px;
  }

  .Section__container--reverse {
    grid-template-areas: "section-content section-image";
  }

  .Section__content {
    justify-content: start;
    justify-items: start;
    max-width: var(--sectionContentMaxWidth);
  }

  .Section__text {
    text-align: start;
  }
}