/* Christian Mingle-specific layout on top of libs/landing-static base.css. */

/* Mobile hero text carries a shadow over the photo; desktop is green on light. */
.hero__intro {
  filter: drop-shadow(2px 2px 10px rgba(0, 0, 0, 0.15));
}

@media (min-width: 1024px) {
  .hero__intro {
    filter: drop-shadow(2px 2px 4px rgba(255, 255, 255, 0.5));
  }
  .hero__title {
    font-size: 4rem;
    line-height: 64px;
  }
  .showcase__title {
    font-size: 3rem;
    line-height: 1.2;
  }
  .appstores__heading {
    font-size: 3rem;
    line-height: 1.2;
  }
}

/* Illustration benefits over the radiating-rays background, image below text. */
.benefits {
  justify-items: center;
}

.benefit {
  max-width: 320px;
}

.benefit__icon {
  order: 3;
  background: url("/assets/images/rays_bg.png") center no-repeat;
  background-size: contain;
}

.benefit__icon img {
  height: 276px;
  width: auto;
}

/* Full-width white section: drop the centered max-width so the background
 * spans the viewport (like www.christianmingle.com .content-section), and pad
 * the grid in instead. */
.showcase--first {
  max-width: none;
  margin: 0;
  background-color: var(--white);
}

@media (min-width: 1024px) {
  .showcase--first {
    padding-inline: max(1.5rem, calc((100vw - var(--max-content)) / 2 + 1.5rem));
  }
}

/* Clerk card heading uses the CM green serif. */
.clerk-header-title {
  color: var(--cm-green);
  font-family: var(--font-heading);
}

.callout p {
  font-size: 27px;
  line-height: 1.6;
}