/* About Us: Our Story, Location, Reviews. Scoped to the child widget wrappers. */

.about-story-copy,
.about-location-copy,
.about-reviews-copy,
.about-responsible-copy {
  text-align: left;
}

.about-story-copy p,
.about-story-copy li,
.about-responsible-copy p,
.about-responsible-copy li {
  text-align: left;
}

.about-responsible-card {
  text-align: left;
}

.about-story-section {
  padding-bottom: 5rem;
}

.about-story-side-mobile {
  max-height: 14rem;
  object-fit: cover;
}

.about-story-side {
  width: 15rem;
}

.about-story-side-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Section title: the widget's pt-10 / mb-8 utilities are not in the prebuilt
   output.css, so the title sat flush against the banner. Match Accommodation. */
.about-story-section > .text-center:first-child {
  padding-top: 2rem;
  margin-bottom: 2.5rem;
}

@media (max-width: 767px) {
  .about-story-section > .text-center:first-child {
    padding-top: 1.5rem;
    margin-bottom: 2rem;
  }
}

/* Thread + feather: its own block under the copy, whole image visible,
   so it never crosses the text. */
.about-story-thread {
  position: relative;
  width: calc(100% - 15rem);
  aspect-ratio: 1528 / 307;
  margin-top: 1rem;
  background-image: url("../images/about-us/Group-587.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% 100%;
  pointer-events: none;
}

.about-reviews-section {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

@media (min-width: 1024px) {
  .about-story-row {
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .about-reviews-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

.about-location-map-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-location-map-link {
  display: block;
  width: 100%;
  line-height: 0;
}

.about-location-map {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
}

.about-location-map--embed {
  height: 22rem;
  border: 0;
}

@media (min-width: 1024px) {
  .about-location-map--embed {
    height: 28rem;
  }
}

@media (max-width: 1023px) {
  .about-story-side {
    width: 100%;
  }
}