.before-after-section {
  padding: 90px clamp(22px, 7vw, 110px) 105px;
  background: linear-gradient(180deg, #111 0%, #090909 100%);
  border-top: 1px solid rgba(216, 173, 88, .18);
  text-align: center;
}

.before-after-heading {
  max-width: 760px;
  margin: 0 auto 42px;
}

.before-after-heading h2 {
  margin: 0;
  font: 600 clamp(42px, 6vw, 70px)/1.05 "Playfair Display", serif;
  letter-spacing: -.035em;
}

.before-after-heading > p:last-child {
  margin: 20px auto 0;
  color: #c9c7c2;
  font-size: 18px;
  line-height: 1.7;
}

.before-after-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 34px);
  max-width: 1180px;
  margin: 0 auto;
}

.comparison-set .before-after-grid + .before-after-grid {
  margin-top: clamp(24px, 4vw, 42px);
}

.comparison-set-title {
  margin: 0 0 20px;
  color: #f3d592;
  font: 600 clamp(27px, 3vw, 38px)/1.2 "Playfair Display", serif;
}

.comparison-set-secondary {
  margin-top: 58px;
  padding-top: 50px;
  border-top: 1px solid rgba(216, 173, 88, .25);
}

.comparison-card {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(216, 173, 88, .35);
  border-radius: 22px;
  background: #171717;
  box-shadow: 0 25px 70px rgba(0, 0, 0, .38);
}

.comparison-image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.comparison-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comparison-label {
  position: absolute;
  top: 18px;
  left: 18px;
  min-width: 104px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(10, 10, 10, .9);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
}

.comparison-label-after {
  background: linear-gradient(135deg, #f3d592, #c99543);
  color: #15110a;
  border-color: #f3d592;
}

.before-after-cta {
  margin-top: 38px;
  min-height: 54px;
  font-size: 16px;
}

@media (max-width: 720px) {
  .before-after-section {
    padding: 72px 18px 82px;
  }

  .before-after-heading {
    margin-bottom: 30px;
  }

  .before-after-heading > p:last-child {
    font-size: 17px;
  }

  .before-after-grid {
    grid-template-columns: 1fr;
  }

  .comparison-set-secondary {
    margin-top: 44px;
    padding-top: 40px;
  }

  .comparison-image {
    aspect-ratio: 4 / 3;
  }

  .comparison-label {
    top: 14px;
    left: 14px;
    font-size: 18px;
  }
}