.raft-h2o-problem {
  --raft-h2op-u: min(1vw, 19.2px);
  background: #fff;
  color: #000026;
  font-family: "Neue Einstellung", sans-serif;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.raft-h2o-problem *,
.raft-h2o-problem *::before,
.raft-h2o-problem *::after {
  box-sizing: border-box;
}

.raft-h2o-problem__canvas {
  background:
    radial-gradient(circle at 98% 9%, rgba(240, 82, 82, .62) 0, rgba(240, 82, 82, .28) 12%, rgba(240, 82, 82, 0) 31%),
    radial-gradient(ellipse at 2% 96%, rgba(246, 213, 134, .96) 0, rgba(243, 148, 108, .55) 14%, rgba(240, 82, 82, 0) 35%),
    #fff;
  height: calc(var(--raft-h2op-u) * 61.041667);
  margin: 0 auto;
  max-width: 1920px;
  overflow: hidden;
  position: relative;
  width: min(100%, 1920px);
}

.raft-h2o-problem__atmosphere {
  background:
    radial-gradient(ellipse 25% 24% at 67% 53%, #f6d586 10%, #f05252 40%, rgba(240, 82, 82, 0) 100%),
    radial-gradient(ellipse 28% 20% at 61% 43%, #f05252 0, #f6d586 50.146%, rgba(240, 82, 82, 0) 100%);
  filter: blur(calc(var(--raft-h2op-u) * 12.28125));
  height: calc(var(--raft-h2op-u) * 452.760417);
  left: calc(var(--raft-h2op-u) * -159.6875);
  opacity: .62;
  pointer-events: none;
  position: absolute;
  top: calc(var(--raft-h2op-u) * -308.024826);
  width: calc(var(--raft-h2op-u) * 419.427083);
}

.raft-h2o-problem__glow {
  background: #f05252;
  border-radius: 50%;
  filter: blur(calc(var(--raft-h2op-u) * 10.416667));
  height: calc(var(--raft-h2op-u) * 35.572917);
  left: calc(var(--raft-h2op-u) * 6.822917);
  opacity: .25;
  pointer-events: none;
  position: absolute;
  top: calc(var(--raft-h2op-u) * 27.96875);
  width: calc(var(--raft-h2op-u) * 86.40625);
}

.raft-h2o-problem__card {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(80deg, #4f0657 16.827%, #4f0657 46.652%, #f05252 60.776%, #f6d586 96.373%) border-box;
  border: 1px solid transparent;
  border-radius: calc(var(--raft-h2op-u) * 1.25);
  height: calc(var(--raft-h2op-u) * 49.166667);
  left: calc(var(--raft-h2op-u) * 10);
  overflow: hidden;
  position: absolute;
  top: calc(var(--raft-h2op-u) * 6.25);
  width: calc(var(--raft-h2op-u) * 80);
}

.raft-h2o-problem__card::before {
  background: url("../../images/h2o-problem/problem-wave.png") center bottom / cover no-repeat;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.raft-h2o-problem__card::after {
  border-radius: inherit;
  box-shadow: inset 0 calc(var(--raft-h2op-u) * .208333) calc(var(--raft-h2op-u) * 3.744792) rgba(243, 125, 125, .3);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 3;
}

.raft-h2o-problem__wave {
  display: none;
  height: 100%;
  inset: 0;
  max-width: none;
  object-fit: cover;
  object-position: center bottom;
  pointer-events: none;
  position: absolute;
  transform: none;
  width: 100%;
  z-index: 0;
}

.raft-h2o-problem .raft-h2o-problem__wave {
  display: none;
}

.raft-h2o-problem__intro {
  height: calc(var(--raft-h2op-u) * 16.5625);
  left: calc(var(--raft-h2op-u) * 2.864583);
  margin: 0;
  position: absolute;
  top: calc(var(--raft-h2op-u) * 2.8125);
  width: calc(var(--raft-h2op-u) * 39.479167);
  z-index: 2;
}

.raft-h2o-problem__eyebrow {
  color: #4f0657;
  font-size: calc(var(--raft-h2op-u) * .729167);
  font-weight: 700;
  letter-spacing: .07em;
  line-height: 1.6;
  margin: 0;
  text-transform: uppercase;
}

.raft-h2o-problem__intro h2 {
  color: #000026;
  font-size: calc(var(--raft-h2op-u) * 2.916667);
  font-weight: 700;
  letter-spacing: calc(var(--raft-h2op-u) * -.104167);
  line-height: 1.25;
  margin: calc(var(--raft-h2op-u) * .416667) 0 0;
}

.raft-h2o-problem__lead {
  color: #000026;
  font-size: calc(var(--raft-h2op-u) * .9375);
  font-weight: 400;
  line-height: 1.6;
  margin: calc(var(--raft-h2op-u) * 1.041667) 0 0;
  width: 100%;
}

.raft-h2o-problem__pressures {
  inset: 0;
  position: absolute;
  z-index: 2;
}

.raft-h2o-problem__pressure {
  height: calc(var(--raft-h2op-u) * 13.385417);
  margin: 0;
  position: absolute;
  width: calc(var(--raft-h2op-u) * 31.09375);
}

.raft-h2o-problem__pressure--lost {
  left: calc(var(--raft-h2op-u) * 43.854167);
  top: calc(var(--raft-h2op-u) * 2.34375);
}

.raft-h2o-problem__pressure--treatment {
  left: calc(var(--raft-h2op-u) * 2.135417);
  top: calc(var(--raft-h2op-u) * 21.666667);
}

.raft-h2o-problem__pressure--costly {
  left: calc(var(--raft-h2op-u) * 47.34375);
  top: calc(var(--raft-h2op-u) * 17.916667);
}

.raft-h2o-problem__pressure--compliance {
  left: calc(var(--raft-h2op-u) * 9.479167);
  top: calc(var(--raft-h2op-u) * 35.3125);
}

.raft-h2o-problem__pressure--circular {
  left: calc(var(--raft-h2op-u) * 43.854167);
  top: calc(var(--raft-h2op-u) * 32.447917);
}

.raft-h2o-problem__portrait {
  border: 1px solid rgba(79, 6, 87, .25);
  border-radius: 999px;
  height: calc(var(--raft-h2op-u) * 10.885417);
  left: calc(var(--raft-h2op-u) * .416667);
  overflow: hidden;
  position: absolute;
  top: calc(var(--raft-h2op-u) * .9375);
  width: calc(var(--raft-h2op-u) * 10.885417);
}

.raft-h2o-problem__portrait img {
  border-radius: 999px;
  display: block;
  height: calc(var(--raft-h2op-u) * 10.052083);
  left: calc(var(--raft-h2op-u) * .416667);
  max-width: none;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: calc(var(--raft-h2op-u) * .416667);
  width: calc(var(--raft-h2op-u) * 10.052083);
}

.raft-h2o-problem__pressure-copy {
  left: calc(var(--raft-h2op-u) * 12.34375);
  position: absolute;
  top: calc(var(--raft-h2op-u) * .9375);
  width: calc(var(--raft-h2op-u) * 17.291667);
}

.raft-h2o-problem__pressure--treatment .raft-h2o-problem__pressure-copy {
  width: calc(var(--raft-h2op-u) * 18.333333);
}

.raft-h2o-problem__pressure-icon {
  display: block;
  height: calc(var(--raft-h2op-u) * 2.239583);
  margin: 0;
  max-width: none;
  width: calc(var(--raft-h2op-u) * 2.239583);
}

.raft-h2o-problem__pressure h3 {
  -webkit-background-clip: text;
  background-image: radial-gradient(circle at 80% 84%, #f6d586 0, #f05252 24%, #4f0657 57%, #4f0657 100%);
  background-clip: text;
  color: #4f0657;
  font-size: calc(var(--raft-h2op-u) * 1.25);
  font-weight: 700;
  line-height: 1.6;
  margin: calc(var(--raft-h2op-u) * .625) 0 0;
  white-space: nowrap;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .raft-h2o-problem__pressure h3 {
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

.raft-h2o-problem__pressure p {
  color: #000026;
  font-size: calc(var(--raft-h2op-u) * .9375);
  font-weight: 400;
  line-height: 1.6;
  margin: calc(var(--raft-h2op-u) * .625) 0 0;
}

@media (max-width: 1100px) {
  .raft-h2o-problem {
    --raft-h2op-u: 19.2px;
  }

  .raft-h2o-problem__canvas {
    height: auto;
    min-height: 0;
    padding: 64px 20px;
  }

  .raft-h2o-problem__atmosphere,
  .raft-h2o-problem__glow {
    display: none;
  }

  .raft-h2o-problem__card {
    height: auto;
    left: auto;
    margin: 0 auto;
    min-height: 0;
    padding: 38px 28px 48px;
    position: relative;
    top: auto;
    width: min(100%, 760px);
  }

  .raft-h2o-problem__wave {
    bottom: 0;
    height: auto;
    left: -36%;
    opacity: .7;
    top: auto;
    transform: none;
    width: 210%;
  }

  .raft-h2o-problem__intro {
    height: auto;
    left: auto;
    position: relative;
    top: auto;
    width: 100%;
  }

  .raft-h2o-problem__eyebrow {
    font-size: 12px;
  }

  .raft-h2o-problem__intro h2 {
    font-size: clamp(34px, 7vw, 48px);
    letter-spacing: -1.5px;
    margin-top: 8px;
  }

  .raft-h2o-problem__lead {
    font-size: 17px;
    margin-top: 20px;
  }

  .raft-h2o-problem__pressures {
    display: grid;
    gap: 38px;
    grid-template-columns: 1fr;
    margin-top: 48px;
    position: relative;
  }

  .raft-h2o-problem__pressure,
  .raft-h2o-problem__pressure--lost,
  .raft-h2o-problem__pressure--treatment,
  .raft-h2o-problem__pressure--costly,
  .raft-h2o-problem__pressure--compliance,
  .raft-h2o-problem__pressure--circular {
    align-items: center;
    display: grid;
    gap: 24px;
    grid-template-columns: 132px minmax(0, 1fr);
    height: auto;
    left: auto;
    position: relative;
    top: auto;
    width: 100%;
  }

  .raft-h2o-problem__portrait {
    height: 132px;
    left: auto;
    position: relative;
    top: auto;
    width: 132px;
  }

  .raft-h2o-problem__portrait img {
    height: 120px;
    left: 5px;
    top: 5px;
    width: 120px;
  }

  .raft-h2o-problem__pressure-copy,
  .raft-h2o-problem__pressure--treatment .raft-h2o-problem__pressure-copy {
    left: auto;
    position: relative;
    top: auto;
    width: 100%;
  }

  .raft-h2o-problem__pressure-icon {
    height: 36px;
    width: 36px;
  }

  .raft-h2o-problem__pressure h3 {
    font-size: 21px;
    margin-top: 7px;
    white-space: normal;
  }

  .raft-h2o-problem__pressure p {
    font-size: 16px;
    margin-top: 7px;
  }
}

@media (max-width: 560px) {
  .raft-h2o-problem__canvas {
    padding: 40px 14px;
  }

  .raft-h2o-problem__card {
    border-radius: 18px;
    padding: 30px 20px 40px;
  }

  .raft-h2o-problem__intro h2 br {
    display: none;
  }

  .raft-h2o-problem__pressure,
  .raft-h2o-problem__pressure--lost,
  .raft-h2o-problem__pressure--treatment,
  .raft-h2o-problem__pressure--costly,
  .raft-h2o-problem__pressure--compliance,
  .raft-h2o-problem__pressure--circular {
    align-items: start;
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .raft-h2o-problem__portrait {
    height: 96px;
    width: 96px;
  }

  .raft-h2o-problem__portrait img {
    height: 86px;
    left: 4px;
    top: 4px;
    width: 86px;
  }
}