.who-fits {
  padding-block: 20px;
}

.who-fits__box {
  --who-bg: var(--tint-selago);
  --who-line: color-mix(in srgb, var(--color-blue) 14%, transparent);

  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "head  head"
    "media list"
    "media cta";
  column-gap: clamp(24px, 2.8cqw, 56px);
  row-gap: clamp(14px, 1.702cqw, 32px);
  padding: var(--card-pad-top) var(--card-pad) var(--card-pad);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  background: var(--who-bg);
}

.who-fits__box::before {
  content: '';
  position: absolute;
  top: 0.532cqw;
  right: 0;
  width: 26cqw;
  height: 15cqw;
  background:
    linear-gradient(to bottom, var(--who-line) 0 1.66%, transparent 1.66%),
    linear-gradient(to right, var(--who-line) 0 1.66%, transparent 1.66%);
  -webkit-mask-image: radial-gradient(36.77cqw 21.21cqw at 100% 0, black 25%, transparent 72%);
  mask-image: radial-gradient(36.77cqw 21.21cqw at 100% 0, black 25%, transparent 72%);
  pointer-events: none;
}

.who-fits__head {
  grid-area: head;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 0.851cqw, 16px);
}

.who-fits__title {
  font-size: var(--fs-h2);
  font-family: var(--font-heading);
  line-height: 1.05;
  font-weight: 700;
  color: var(--color-black);
}

.who-fits__title-muted {
  display: block;
  color: var(--color-gray-2);
}

.who-fits__subtitle {
  font-size: var(--fs-text);
  line-height: 1.4;
  color: var(--color-gray-1);
}

.who-fits__list {
  grid-area: list;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 16px;
}

.who-fits__item {
  display: flex;
  align-items: flex-start;
  gap: clamp(10px, 0.96cqw, 18px);
  padding: clamp(12px, 1.06cqw, 20px) clamp(12px, 1.06cqw, 20px);
  border-radius: 20px;
  --who-check: clamp(28px, 2.4cqw, 45.11px);
  --who-title-fs: clamp(14px, 0.957cqw, 18px);
}

.who-fits__item:nth-child(1),
.who-fits__item:nth-child(4) { background: var(--tint-green); }

.who-fits__item:nth-child(2),
.who-fits__item:nth-child(5) { background: var(--tint-cream-2); }

.who-fits__item:nth-child(3),
.who-fits__item:nth-child(6) { background: var(--tint-pink); }

.who-fits__check {
  flex: none;
  width: var(--who-check);
  height: var(--who-check);
  color: var(--color-blue);
}

.who-fits__check path {
  stroke: var(--color-white);
}

.who-fits__item-body {
  display: flex;
  flex-direction: column;
  gap: 11.27px;
  padding-top: max(0px, calc((var(--who-check) - var(--who-title-fs) * 1.25) / 2));
}

.who-fits__item-title {
  font-family: var(--font-heading);
  font-size: var(--who-title-fs);
  line-height: 1.25;
  font-weight: 700;
  color: var(--color-black);
}

.who-fits__item-text {
  font-size: clamp(13px, 0.85cqw, 16px);
  line-height: 1.4;
  color: var(--color-gray-1);
}

.who-fits__cta {
  grid-area: cta;
  align-self: end;
  justify-self: start;
}

.who-fits__media {
  grid-area: media;
  position: relative;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-photo);
}

.who-fits__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 50%;
  border-radius: var(--radius-card);
}

@media (min-width: 1025px) {
  .who-fits__list {
    justify-self: end;
    width: 54.52cqw;
    grid-template-rows: repeat(3, minmax(8.567cqw, 1fr));
  }

  .who-fits__item { padding: 1.596cqw 1.383cqw; }

  .who-fits__cta { margin-left: calc(100% - 54.52cqw); }

}

.who-fits__br { display: none; }

@media (max-width: 1024px) {
  .who-fits__box {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas:
      "head"
      "media"
      "list"
      "cta";
  }

  .who-fits__photo {
    position: static;
    display: block;
    height: auto;
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 767px) {
  .who-fits__box { row-gap: 20px; padding-top: var(--card-pad); }

  .who-fits__list { grid-template-columns: minmax(0, 1fr); }

  .who-fits__item { padding: 16px; }

  .who-fits__cta {
    justify-self: stretch;
    justify-content: center;
  }
}