.transformationHeading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 60px;
}

.transformationHeading > p {
  grid-column: auto;
  margin: 0;
}

.transformationHeading > span {
  max-width: 600px;
}

.transformationVisuals {
  margin-top: 45px;
}

.beforePanel,
.afterPanel {
  position: relative;
}

.beforePanel::after {
  background: linear-gradient(0deg, #091b29b5, transparent 58%);
}

.transformOverlay {
  position: absolute;
  z-index: 3;
  left: 24px;
  margin: 0;
  padding: 13px 17px;
  border: 1px solid #ffffff4d;
  border-radius: 4px;
  background: #0b2940d9;
  box-shadow: 0 12px 28px #00101d55;
  color: #fff;
  font-size: clamp(34px, 3.4vw, 51px);
  line-height: .95;
  letter-spacing: -.05em;
  font-weight: 600;
  backdrop-filter: blur(7px);
}

.beforeLabel {
  bottom: 124px;
}

.afterLabel {
  top: 60px;
}

.transformOverlay em {
  color: #a8e1fa;
  font-style: normal;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.transformOverlay strong {
  color: #a8e1fa;
  font-weight: 600;
}

.changeArrow {
  background: #55a9d4;
}

@media (max-width: 900px) {
  .transformationHeading {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }
}

@media (max-width: 700px) {
  .transformOverlay {
    left: 15px;
    padding: 10px 13px;
    font-size: 37px;
  }

  .beforeLabel {
    bottom: 118px;
  }

  .afterLabel {
    top: 52px;
  }
}