.church-solution {
  /* asset @1.5x: 2010px wide, 105px side margins, 1800px content */
  --solution-image-native: 2010;
  --solution-image-side: 105;
  --solution-image-inner: 1800;
  /* design reference width for mockup height ratios */
  --solution-mockup-width: 1240;
  --solution-layout-inner-max: calc(1248px - var(--container-padding-horizontal) * 2);
  overflow: hidden;
}

.church-solution .ready-to-launch {
  --ready-to-launch-icon-color: #d14126;
}

.solution-buttons {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.solution-buttons-bottom {
  justify-content: center;
}

ul li::before {
  background: #d14126;
}

ul li {
  margin: 8px 0;
  margin-left: 16px;
}

@media (max-width: 768px) {
  ul li {
    margin-left: 8px;
  }

  .solution-buttons {
    gap: 16px;
  }
}

@media (max-width: 610px) {
  .solution-buttons-bottom {
    justify-content: start;
  }
}

.both-sides-extended {
  max-width: calc(1248px + 92px);
  position: relative;
  margin-left: auto;
  margin-right: auto;
  overflow: visible;
}

.solution-block {
  overflow: visible;
}

.solution-block__layout {
  position: relative;
  overflow: visible;
  container-type: inline-size;
}

/*
 * Mockup min-height: scales with actual block width (cqw), not viewport.
 * --solution-mockup-slack preserves desktop breathing room from clamp max
 * so mid-width breakpoints (e.g. ~1070px) keep the same text-to-image gap.
 */
.solution-block__layout--mockup-height {
  --solution-mockup-slack: calc(
    var(--solution-mockup-max) - var(--solution-layout-inner-max) * var(--solution-mockup-h) /
      var(--solution-mockup-width)
  );
  min-height: clamp(
    var(--solution-mockup-min),
    calc(100cqw * var(--solution-mockup-h) / var(--solution-mockup-width) + var(--solution-mockup-slack)),
    var(--solution-mockup-max)
  );
}

.solution-block__media {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: visible;
  z-index: 1;
}

.solution-block__text {
  position: relative;
  z-index: 2;
}

.solution-bleed-image {
  width: calc(100% * var(--solution-image-native) / var(--solution-image-inner));
  margin-left: calc(100% * var(--solution-image-side) / var(--solution-image-inner) * -1);
  height: auto;
  display: block;
}

@media (max-width: 1023px) {
  .solution-block__layout {
    display: flex;
    flex-direction: column-reverse;
  }

  .solution-block__layout--mockup-height {
    min-height: auto;
  }

  .solution-block__media {
    position: static;
    padding-top: 0;
  }
}