.fp-about {
  container: about / inline-size;
  padding-block: 3rem;
  scroll-margin-block-start: 5.5rem;
  content-visibility: auto;
  contain-intrinsic-size: auto none auto 32rem;
}

#oferta,
#rezerwacja {
  scroll-margin-block-start: 5.5rem;
}

.fp-about__grid {
  display: grid;
  gap: 2rem;
  align-items: center;
}

.fp-about__photo picture {
  display: block;
}

.fp-about__photo img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  max-block-size: 28rem;
  object-fit: contain;
  background: transparent;
}

.fp-about__placeholder {
  display: grid;
  place-items: center;
  inline-size: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 1.25rem;
  background: linear-gradient(165deg, #d7f4ef 0%, #b7e4dd 100%);
  color: var(--fp-teal-dark);
  font-size: clamp(3rem, 12cqi, 5rem);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.fp-eyebrow {
  margin: 0 0 0.35rem;
  color: var(--fp-teal-dark);
  font-weight: 600;
}

.fp-about__title {
  margin: 0;
  font-size: clamp(1.6rem, 3cqi, 2.2rem);
  color: var(--fp-navy);
}

.fp-about__name {
  margin: 0.35rem 0 1rem;
  color: var(--fp-teal);
  font-size: 1.35rem;
  font-weight: 700;
}

.fp-about__lead {
  color: var(--fp-muted);
  line-height: 1.65;
}

.fp-about__points {
  margin: 0 0 1.4rem;
  padding: 0;
  list-style: none;
}

.fp-about__points li {
  position: relative;
  padding-inline-start: 1.8rem;
  margin-block: 0.55rem;
}

.fp-about__points li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.25rem;
  inline-size: 1.1rem;
  block-size: 1.1rem;
  border-radius: 50%;
  background: var(--fp-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' d='M3 8.5 6.5 12 13 4.5'/%3E%3C/svg%3E") center / 0.8rem no-repeat;
}

@media (min-width: 800px) {
  .fp-about__grid {
    grid-template-columns: 0.65fr 1.35fr;
  }

  .fp-about--flip .fp-about__photo {
    order: 2;
  }
}

@media (max-width: 799px) {
  .fp-about__grid {
    grid-template-columns: 1fr;
  }

  .fp-about__photo,
  .fp-about--flip .fp-about__photo {
    order: 0;
    max-inline-size: 18rem;
    margin-inline: auto;
  }

  .fp-about__copy {
    max-inline-size: none;
  }

  .fp-about__lead,
  .fp-about__points {
    max-inline-size: none;
  }
}

@supports (container-type: inline-size) {
  @container about (inline-size > 48rem) {
    .fp-about__grid {
      grid-template-columns: 0.65fr 1.35fr;
    }

    .fp-about--flip .fp-about__photo {
      order: 2;
    }
  }
}

.fp-booking--fallback {
  padding-block: 2rem 3.5rem;
}

.fp-booking--fallback .fp-booking__shell {
  display: grid;
  gap: 0;
  border-radius: 1.5rem;
  background: var(--fp-teal-dark);
}

.fp-booking--fallback .fp-booking__intro {
  padding: 1.6rem 1.4rem;
  color: var(--fp-white);
}

.fp-booking--fallback .fp-booking__brand,
.fp-booking--fallback .fp-booking__title,
.fp-booking--fallback .fp-booking__lead {
  margin: 0 0 0.55rem;
}

.fp-booking--fallback .fp-booking__title {
  font-size: 1.8rem;
}

.fp-booking--fallback .fp-booking__perks {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.fp-booking--fallback .fp-booking__perks li {
  margin-block: 0.4rem;
}

.fp-booking--fallback .fp-booking__form {
  padding: 1rem;
  background: var(--fp-white);
}

@media (min-width: 900px) {
  .fp-booking--fallback .fp-booking__shell {
    grid-template-columns: minmax(14rem, 0.7fr) 1.6fr;
  }
}