:root {
  --why-gap-list: clamp(2.5rem, calc(1.94853rem + 2.3529vw), 3.125rem);
  --perk-pad: clamp(1.5rem, calc(1.38971rem + 0.4706vw), 1.625rem);
  --perk-dot-gap: clamp(0.75rem, calc(0.63971rem + 0.4706vw), 0.875rem);
  --perk-gap: clamp(0.625rem, calc(0.51471rem + 0.4706vw), 0.75rem);
}

@media (min-width: 800px) and (max-width: 1279px) {
  :root {
    --perk-pad: 1.625rem;
    --perk-dot-gap: 0.875rem;
    --perk-gap: 0.75rem;
  }
}

@media (min-width: 1280px) {
  :root {
    --perk-pad: clamp(1.75rem, calc(1.25rem + 0.625vw), 1.875rem);
    --perk-dot-gap: clamp(0.9375rem, calc(0.6875rem + 0.3125vw), 1rem);
    --perk-gap: clamp(0.75rem, calc(0.25rem + 0.625vw), 0.875rem);
  }
}

@media (min-width: 1600px) {
  :root {
    --perk-pad: 1.875rem;
    --perk-dot-gap: 1rem;
    --perk-gap: 0.875rem;
  }
}

.why__card { --corner-color: var(--lavender); background: var(--beige-light); }

.why__list { grid-column: 7 / span 5; grid-row: 1; display: grid; gap: 1.25rem; align-content: start; }
.perk {
  background: var(--beige-light);
  border-radius: 1.25rem;
  padding: var(--perk-pad);
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--perk-dot-gap);
}
.perk::before {
  content: '';
  grid-column: 1; grid-row: 1;
  width: .9375rem; height: .9375rem;
  border-radius: 50%;
  background: var(--perk-color, var(--accent-secondary));
  margin-top: .32em;
}
.perk__title { grid-column: 2; }
.perk__text  { grid-column: 2; margin-top: var(--perk-gap); }

.perk--1 { --perk-color: var(--accent-primary-1); }
.perk--2 { --perk-color: var(--accent-primary-2); }
.perk--3 { --perk-color: var(--accent-secondary); }
.perk--4 { --perk-color: var(--lavender); }

@media (max-width: 1279px) {
  .why .section-intro { grid-row: 1; }
  .why__list { grid-row: 2; margin-top: var(--why-gap-list); }
}
@media (max-width: 799px) {
  .why .section-intro,
  .why__list { grid-column: 2 / span 10; }
}