.ipm-why {
  --ipm-why-navy: var(--ip-navy, #071733);
  --ipm-why-blue: var(--ip-blue, #087cf0);
  --ipm-why-cyan: var(--ip-cyan, #12b9ee);
  --ipm-why-purple: var(--secondary, #4917ad);
  --ipm-why-muted: var(--ip-muted, #66758d);
  --ipm-why-border: var(--ip-border, #dde7f1);

  padding: 92px 32px;

  font-family: var(--ip-font-body, Manrope, sans-serif);

  background:
    radial-gradient(
      circle at 75% 30%,
      rgba(59, 160, 246, .05),
      transparent 32%
    ),
    #fff;
}

.ipm-why__inner {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  align-items: center;

  gap: 76px;

  max-width: 1420px;
  margin: 0 auto;
}


/* =========================================
   MEDIA
   ========================================= */

.ipm-why__media {
  position: relative;

  overflow: hidden;

  aspect-ratio: 1 / 1;

  border-radius: 28px;

  background: #eef5fa;

  box-shadow:
    0 20px 50px rgba(25, 59, 96, .07);
}

.ipm-why__media::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      transparent 68%,
      rgba(4, 18, 43, .05)
    );
}

.ipm-why__media img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* =========================================
   CONTENT
   ========================================= */

.ipm-why__content {
  min-width: 0;
}

.ipm-why__header {
  max-width: 660px;

  margin-bottom: 38px;
}

.ipm-why__eyebrow {
  display: inline-block;

  margin-bottom: 18px;

  color: var(--ipm-why-cyan);

  font-size: 13px;
  font-weight: 800;

  letter-spacing: .12em;
  text-transform: uppercase;
}

.ipm-why__header h2 {
  margin: 0;

  color: var(--ipm-why-navy);

  font-size:
    clamp(40px, 4vw, 60px);

  line-height: 1.05;

  letter-spacing: -.045em;

  font-weight: 760;
}

.ipm-why__header h2 span {
  color: var(--ipm-why-blue);
}

.ipm-why__header p {
  max-width: 620px;

  margin: 24px 0 0;

  color: var(--ipm-why-muted);

  font-size: 18px;
  line-height: 1.7;
}


/* =========================================
   CARDS
   ========================================= */

.ipm-why__grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 16px;
}

.ipm-why-card {
  display: flex;
  align-items: flex-start;

  gap: 18px;

  min-height: 170px;

  padding: 28px 26px;

  background:
    rgba(255,255,255,.96);

  border:
    1px solid var(--ipm-why-border);

  border-radius: 18px;

  box-shadow:
    0 10px 28px rgba(27, 65, 103, .035);

  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}

.ipm-why-card:hover {
  transform: translateY(-2px);

  border-color:
    rgba(27, 137, 231, .25);

  box-shadow:
    0 16px 34px rgba(27, 65, 103, .07);
}

.ipm-why-card__icon {
  flex: 0 0 auto;

  display: grid;
  place-items: center;

  width: 54px;
  height: 54px;

  border-radius: 50%;

  color: #0788ec;

  background:
    linear-gradient(
      135deg,
      rgba(16, 187, 239, .08),
      rgba(83, 29, 190, .05)
    );
}

.ipm-why-card__icon svg {
  width: 29px;
  height: 29px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.6;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.ipm-why-card h3 {
  margin: 5px 0 8px;

  color: var(--ipm-why-navy);

  font-size: 19px;
  font-weight: 730;

  line-height: 1.25;
}

.ipm-why-card p {
  margin: 0;

  color: var(--ipm-why-muted);

  font-size: 14px;
  line-height: 1.55;
}


/* =========================================
   BOTTOM LINK
   ========================================= */

.ipm-why__link {
  display: inline-flex;
  align-items: center;

  gap: 13px;

  margin-top: 28px;

  padding-bottom: 4px;

  color: var(--ipm-why-purple);

  text-decoration: none;

  border-bottom:
    1px solid rgba(73, 23, 173, .45);

  font-size: 16px;
  font-weight: 700;

  transition:
    color .2s ease,
    border-color .2s ease;
}

.ipm-why__link:hover {
  color: var(--ipm-why-blue);

  border-color:
    var(--ipm-why-blue);
}

.ipm-why__link svg {
  width: 21px;
  height: 21px;

  fill: none;
  stroke: currentColor;

  stroke-width: 2;

  stroke-linecap: round;
  stroke-linejoin: round;

  transition:
    transform .2s ease;
}

.ipm-why__link:hover svg {
  transform: translateX(4px);
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 1050px) {

  .ipm-why {
    padding:
      74px 24px;
  }

  .ipm-why__inner {
    grid-template-columns: 1fr;

    gap: 48px;
  }

  .ipm-why__media {
    max-width: 780px;

    aspect-ratio: 16 / 10;
  }

  .ipm-why__content {
    max-width: 780px;
  }

}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 650px) {

  .ipm-why {
    padding:
      56px 14px;
  }

  .ipm-why__inner {
    gap: 34px;
  }

  .ipm-why__media {
    aspect-ratio: 4 / 3;

    border-radius: 20px;
  }

  .ipm-why__eyebrow {
    margin-bottom: 13px;

    font-size: 11px;
  }

  .ipm-why__header h2 {
    font-size: 40px;
  }

  .ipm-why__header p {
    margin-top: 18px;

    font-size: 16px;
  }

  .ipm-why__grid {
    grid-template-columns: 1fr;

    gap: 12px;
  }

  .ipm-why-card {
    min-height: auto;

    padding: 22px 20px;
  }

  .ipm-why-card__icon {
    width: 46px;
    height: 46px;
  }

  .ipm-why-card__icon svg {
    width: 25px;
    height: 25px;
  }

  .ipm-why-card h3 {
    margin-top: 2px;

    font-size: 17px;
  }

  .ipm-why-card p {
    font-size: 13px;
  }

}