.solutions {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  padding-block: clamp(2.625rem, 1.925rem + 3.5vw, 6.25rem);
}

.solutions__media-wrap {
  display: none;
}

.solutions__title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.25rem, 0.875rem + 1.875vw, 3.125rem);
  font-family: var(--font-body-bold);
  font-size: clamp(1.5rem, 0.8rem + 3.5vw, 5rem);
  line-height: 105%;
  margin-bottom: clamp(1.875rem, 1.625rem + 1.25vw, 3.125rem);
}

.section-title__img {
  position: relative;
  width: clamp(2.5rem, 1.3625rem + 5.6875vw, 8.1875rem);
  height: clamp(2.3125rem, 1.2375rem + 5.375vw, 7.6875rem);
  margin-right: 16px;
}

.section-title__img1 {
  position: absolute;
  width: clamp(1.75rem, 0.7625rem + 4.9375vw, 6.6875rem);
  height: clamp(1.75rem, 0.7625rem + 4.9375vw, 6.6875rem);
  top: -95%;
  left: 5%;
}

.section-title__img2 {
  position: absolute;
  width: clamp(0.9375rem, 0.5125rem + 2.125vw, 3.0625rem);
  height: clamp(0.9375rem, 0.5125rem + 2.125vw, 3.0625rem);
  top: -85%;
  right: -25%;
}

.section-title__img3 {
  position: absolute;
  width: clamp(1.0625rem, 0.4875rem + 2.875vw, 3.9375rem);
  height: clamp(1.0625rem, 0.4875rem + 2.875vw, 3.9375rem);
  top: -43%;
  right: -40%;
}

.solutions__beans {
  color: var(--color-primary);
  margin-bottom: var(--space-m);
}

.solutions__list {
  margin-top: clamp(1.5rem, 1.425rem + 0.375vw, 1.875rem);
  border-top: 1px solid var(--color-border);
}

.solutions__list li {
  border-bottom: 1px solid var(--color-border);
}

.solutions__item {
  display: flex;
  align-items: center;
  width: 100%;
  gap: clamp(1.125rem, 0.7rem + 2.125vw, 3.25rem);
  padding-block: clamp(0.9375rem, 0.925rem + 0.0625vw, 1rem);
  border: none;
  background: none;
  font: inherit;
  font-family: var(--font-heading-bold);
  font-size: clamp(1.125rem, 0.7rem + 2.125vw, 3.25rem);
  line-height: clamp(1.5rem, 1.025rem + 2.375vw, 3.875rem);
  color: var(--color-solutions);
  text-align: left;
  cursor: pointer;
}

.solutions__item:hover {
  color: var(--color-primary);
}

.solutions__item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.solutions__num {
  font-family: var(--font-body-regular);
  font-size: 0.875rem;
  color: var(--color-primary-soft);
  font-size: clamp(0.75rem, 0.675rem + 0.375vw, 1.125rem);
  line-height: clamp(1rem, 0.8875rem + 0.5625vw, 1.563rem);
  line-height: 1;
  transform: translateY(-30%);
}

.solutions__content-btn {
  margin-top: clamp(2.1875rem, 2rem + 0.9375vw, 3.125rem);
  text-align: center;
}

.solutions__content-btn .btn {
  padding: 1rem clamp(1.875rem, 1.75rem + 0.625vw, 2.5rem);
  font-size: clamp(0.9375rem, 0.75rem + 0.9375vw, 1.875rem);
  line-height: clamp(1.25rem, 1rem + 1.25vw, 2.5rem);
}

/* Glitch transition — adapted from Codrops' Glitch Slideshow (demo1) */
.solutions__media {
  position: relative;
  margin-left: auto;
  margin-right: -30px;
  width: clamp(18.75rem, 13.2031rem + 27.8125vw, 46.5625rem);
  height: clamp(22.8125rem, 15.875rem + 34.6875vw, 57.5rem);
  border-radius: 6.25rem 0 0 0;
  overflow: hidden;
  --gap-horizontal: 40px;
  --gap-vertical: 50px;
  --time-anim: 2s;
  --delay-anim: 0s;
  --blend-mode-2: luminosity;
  --blend-mode-5: overlay;
  --blend-color-2: var(--color-accent-green);
  --blend-color-5: var(--color-accent-red);
}

@media (min-width: 961px) {
  .solutions {
    grid-template-columns: 1fr 1fr;
  }
  .solutions__title {
    display: inline-flex;
  }
  .solutions__content-btn {
    text-align: left;
  }
  .solutions__media-wrap {
    display: block;
  }
}

/* The real <picture> is the always-visible base layer; .glitch__img divs are
   JS-injected duplicates (each with their own <picture>) used only to carry
   the animated glitch slices on top of it. */
.glitch > picture,
.glitch__img {
  position: absolute;
  top: calc(-1 * var(--gap-vertical));
  left: calc(-1 * var(--gap-horizontal));
  width: calc(100% + var(--gap-horizontal) * 2);
  height: calc(100% + var(--gap-vertical) * 2);
  transform: translate3d(0, 0, 0);
}

.glitch > picture img,
.glitch__img picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.glitch__img {
  isolation: isolate;
  opacity: 0;
}

.glitch__img::after {
  content: "";
  position: absolute;
  inset: 0;
}

.glitch--animate .glitch__img {
  animation-duration: var(--time-anim);
  animation-delay: var(--delay-anim);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}

.glitch--animate .glitch__img:nth-child(2) {
  animation-name: glitch-anim-1;
}

.glitch--animate .glitch__img:nth-child(3) {
  animation-name: glitch-anim-2;
}

.glitch--animate .glitch__img:nth-child(4) {
  animation-name: glitch-anim-3;
}

.glitch--animate .glitch__img:nth-child(5) {
  animation-name: glitch-anim-flash;
}

.glitch--animate .glitch__img:nth-child(2)::after {
  background-color: var(--blend-color-2);
  mix-blend-mode: var(--blend-mode-2);
}

.glitch--animate .glitch__img:nth-child(5)::after {
  background-color: var(--blend-color-5);
  mix-blend-mode: var(--blend-mode-5);
}

@keyframes glitch-anim-1 {
  0%,
  100% {
    opacity: 1;
    transform: translate3d(var(--gap-horizontal), 0, 0) scale3d(-1, -1, 1);
    clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
  }
  20% {
    clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
  }
  30% {
    clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
  }
  40% {
    clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
  }
  50% {
    clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
  }
  55% {
    clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
  }
  60% {
    clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
  }
  65% {
    clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
  }
  70% {
    clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
  }
  80% {
    clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
  }
  85% {
    clip-path: polygon(0 60%, 100% 60%, 100% 65%, 0 65%);
  }
  95% {
    clip-path: polygon(0 72%, 100% 72%, 100% 78%, 0 78%);
  }
}

@keyframes glitch-anim-2 {
  0%,
  100% {
    opacity: 1;
    transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0);
    clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
  }
  10% {
    clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
  }
  15% {
    clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
  }
  17% {
    clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
  }
  19% {
    clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
  }
  33% {
    clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
  }
  35% {
    clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
  }
  40% {
    clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
  }
  45% {
    clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
  }
  49% {
    clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
  }
  50% {
    clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
  }
  55% {
    clip-path: polygon(0 15%, 100% 15%, 100% 35%, 0 35%);
  }
  60% {
    clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
  }
  70% {
    clip-path: polygon(0 65%, 100% 65%, 100% 60%, 0 60%);
  }
  80% {
    clip-path: polygon(0 80%, 100% 80%, 100% 85%, 0 85%);
  }
  90% {
    clip-path: polygon(0 55%, 100% 55%, 100% 65%, 0 65%);
  }
}

@keyframes glitch-anim-3 {
  0%,
  100% {
    opacity: 1;
    transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0)
      scale3d(-1, -1, 1);
    clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
  }
  5% {
    clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
  }
  11% {
    clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
  }
  20% {
    clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
  }
  25% {
    clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
  }
  35% {
    clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
  }
  42% {
    clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
  }
  48% {
    clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
  }
  50% {
    clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
  }
  56% {
    clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
  }
  61% {
    clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
  }
  68% {
    clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
  }
  72% {
    clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
  }
  77% {
    clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
  }
  81% {
    clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
  }
  86% {
    clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
  }
  90% {
    clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
  }
  92% {
    clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
  }
  94% {
    clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
  }
}

@keyframes glitch-anim-flash {
  0%,
  5% {
    opacity: 0.2;
    transform: translate3d(var(--gap-horizontal), var(--gap-vertical), 0);
  }
  5.5%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
}