/* Figma Love Stories compositions: nodes 70:346, 225:2579, 70:552, and 225:2898 */
.template-love-stories,
.layout-weddings main,
.love-stories-board {
  background: var(--color-accent-soft);
}

.love-stories-board {
  position: relative;
  height: auto;
  padding-top: 80px;
  padding-bottom: 80px;
}

.love-stories-board__intro {
  width: 632px;
  max-width: 100%;
  padding: 0;
  margin: 0 auto 48px;
  color: var(--color-text);
  font-family: var(--serif);
  font-size: 1.75rem;
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.285714;
  text-align: center;
}

.love-stories-card {
  min-width: 0;
}

.love-stories-card a,
.love-story-related-card a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.love-stories-card__image {
  width: 100%;
  height: 416px;
  overflow: hidden;
  background: var(--color-bg-secondary);
}

.love-stories-card__image img,
.love-story-related-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.love-stories-card__copy {
  margin-top: 16px;
}

.love-stories-card__copy h2,
.love-stories-card__copy p,
.love-story-related-card__copy h3,
.love-story-related-card__copy p {
  margin: 0;
  color: var(--color-text);
  font-weight: 400;
}

.love-stories-card__copy h2,
.love-story-related-card__copy h3 {
  font-family: var(--serif);
  font-size: 28px;
  letter-spacing: -0.04em;
  line-height: 33.6px;
}

.love-stories-card__copy p,
.love-story-related-card__copy p {
  margin-top: 4px;
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: -0.01em;
  line-height: 24px;
  color: var(--color-text-secondary);
}

.love-stories-card a:is(:hover, :focus-visible) .love-stories-card__copy h2,
.love-story-related-card a:is(:hover, :focus-visible) .love-story-related-card__copy h3 {
  color: var(--color-primary-hover);
}

.has-js .love-stories-board__action.taw-js-only {
  display: flex;
  margin-top: 48px;
}

.has-js .love-stories-board__action.is-complete {
  display: none;
}

.love-stories-board__action .figma-link {
  width: auto;
  min-width: 85px;
  height: 36px;
  padding-inline: 8px;
  border: 0;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
}

.love-story-hero {
  position: relative;
  width: 100vw;
  height: 100vh;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
  color: var(--color-text-inverse);
  background: var(--color-text);
}

.love-story-hero__image,
.love-story-hero__image img,
.love-story-hero__veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.love-story-hero__image img {
  object-fit: cover;
}

.love-story-hero__veil {
  z-index: 1;
  background: var(--hero-overlay);
  pointer-events: none;
}

.love-story-hero__content {
  position: absolute;
  z-index: 2;
  inset: 0;
  padding-bottom: 119.6px;
}

.love-story-hero__content > .row {
  width: 100%;
}

.love-story-hero__content h1 {
  width: 740px;
  max-width: 100%;
  margin: 0;
  color: white;
  font-family: var(--serif);
  font-size: 52px;
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.love-story-hero__content p {
  margin: 0;
  color: white;
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 30px;
}

.love-story-hero__scroll {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 50%;
  width: 119px;
  height: 80px;
  color: var(--color-text-inverse);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 18px;
  text-decoration: none;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.love-story-hero__scroll-rule {
  width: 1px;
  height: 40px;
  background: currentColor;
}

.love-story-body {
  padding-top: 80px;
  padding-bottom: 80px;
  color: var(--color-text);
  background: var(--color-bg);
}

.love-story-body__intro,
.love-story-body__description {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-inline: auto;
}

.love-story-body__credit {
  margin: 0;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 27px;
}

.love-story-body__credit + .love-story-body__credit {
  margin-top: 16px;
}

.love-story-body__credit > .col {
  font-weight: 600;
}

.love-story-body__credit a {
  font-weight: 600;
  text-decoration: none;
}

.love-story-body__description {
  margin-top: 48px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 24px;
}

.love-story-body--no-credits .love-story-body__description {
  margin-top: 0;
}

.love-story-body__description p {
  margin: 0;
}

.love-story-body__description :is(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 24px;
}

.love-story-body__description :is(h1, h2, h3, h4, h5, h6) + * {
  margin-top: 24px;
}

.love-story-body__description p + p {
  margin-top: 24px;
}

.love-story-gallery {
  margin-top: 48px;
}

.love-story-gallery__item {
  overflow: hidden;
}

.love-story-gallery__item img,
.love-story-gallery__picture,
.love-story-gallery__picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.love-story-gallery__square {
  height: 308px;
}

.love-story-gallery__landscape {
  height: 415px;
}

.love-story-gallery__record-item {
  height: 416px;
}

.love-story-related {
  --section-surface: var(--color-highlight);
  padding-top: 80px;
  padding-bottom: 80px;
  color: var(--color-text);
  background: var(--color-highlight);
}

.love-story-related .love-story-related-card__copy p {
  color: var(--color-text);
}

.love-story-related > .row > h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 48px;
}

.love-story-related__grid {
  margin-top: 24px;
}

.love-story-related-card__image {
  width: 100%;
  height: 416px;
  overflow: hidden;
  background: var(--color-highlight);
}

.love-story-related-card__copy {
  margin-top: 24px;
}

@media (min-width: 821px) {
  .love-stories-card {
    min-height: 494px;
  }
  .love-stories-card:nth-child(2) {
    min-height: 518px;
  }
  .love-stories-board,
  .love-story-body,
  .love-story-related {
    padding-right: 80px;
    padding-left: 80px;
  }
  .love-story-gallery--exact {
    height: auto;
  }
  .love-story-related {
    min-height: 758px;
  }
}
@media (max-width: 820px) {
  .layout-weddings .home-site-header__inner,
  .template-wedding .home-site-header__inner {
    height: 72px;
    padding: 14px 16px;
  }
  .layout-weddings .home-wordmark,
  .template-wedding .home-wordmark {
    width: 80px;
  }
  .layout-weddings .home-wordmark .figma-wordmark__image,
  .template-wedding .home-wordmark .figma-wordmark__image {
    width: 75px;
    height: 40px;
  }
  .love-stories-board {
    padding: 48px 16px;
  }
  .love-stories-board__intro {
    width: 343px;
    margin-bottom: 40px;
  }
  .love-stories-card {
    min-height: 416px;
  }
  .love-stories-card:nth-child(-n+2) {
    min-height: 440px;
  }
  .love-stories-card__image {
    height: auto;
    aspect-ratio: 1;
  }
  .love-stories-card__copy h2,
  .love-story-related-card__copy h3 {
    font-size: 24px;
    line-height: 28.8px;
  }
  .love-story-hero__content {
    padding: 0 16px 112.8px;
  }
  .love-story-hero__content h1 {
    width: 343px;
    font-size: 36px;
    line-height: 43.2px;
  }
  .love-story-hero__content p {
    font-size: 16px;
    line-height: 24px;
  }
  .love-story-hero__scroll {
    height: 64px;
  }
  .love-story-hero__scroll-rule {
    height: 32px;
  }
  .love-story-body {
    padding: 48px 16px;
  }
  .love-story-body__description {
    margin-top: 40px;
  }
  .love-story-gallery {
    margin-top: 40px;
  }
  .love-story-gallery--exact {
    height: auto;
  }
  .love-story-gallery__square {
    height: calc((100vw - 48px) / 2);
  }
  .love-story-gallery__landscape {
    height: 225px;
  }
  .love-story-gallery__record-item {
    height: 343px;
  }
  .love-story-related {
    min-height: 1478px;
    padding: 48px 16px;
  }
  .love-story-related > .row > h2 {
    font-size: 32px;
    line-height: 38.4px;
  }
  .love-story-related__grid {
    margin-top: 24px;
  }
  .love-story-related-card__image {
    height: auto;
    aspect-ratio: 1;
  }
  .love-story-related-card__copy {
    margin-top: 16px;
  }
}