.cov { --gauge: 8px; --pad: 24px; --p-row: clamp(.9375rem, .8125rem + .21vw, 1.0625rem); padding: 80px 16px; }
@media (min-width: 48rem) { .cov { padding: 120px 32px; } }
.cov__head { margin-bottom: 40px; }
@media (min-width: 48rem) { .cov__head { margin-bottom: 64px; } }
.cov__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.cov__item { --seg: var(--blue-soft); position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start;
  min-width: 0; overflow: hidden; padding: var(--pad) var(--pad) 28px calc(var(--gauge) + var(--pad)); border-radius: 16px;
  background: var(--neutral-white); }
.cov__item--2 { --seg: var(--peri); }
.cov__item--3 { --seg: var(--blue); }
.cov__item--4 { --seg: var(--blue-ink); }
.cov__item--5 { --seg: var(--peri); background: var(--navy-dark); color: var(--paper-soft); }
.cov__icon { width: 40px; height: 40px; margin-bottom: 18px; color: var(--peri); }
.cov__icon svg { width: 100%; height: 100%; overflow: visible; }
.cov__num { position: absolute; top: calc(var(--pad) + 2px); right: var(--pad); font-size: .8125rem; line-height: 1; font-weight: 500;
  letter-spacing: .08em; color: var(--fg-60); font-variant-numeric: lining-nums tabular-nums; }
.cov__item--5 .cov__num { color: color-mix(in oklab, var(--paper-soft) 64%, transparent); }
.cov__t { margin-bottom: 10px; padding-right: 2rem; font-family: var(--font-display); font-size: 1.625rem; line-height: 1.08;
  letter-spacing: -.012em; font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0; text-wrap: balance; }
.cov__item--5 .cov__t { font-size: 2rem; }
.cov__p { max-width: 34rem; font-size: 1rem; line-height: 1.6; color: var(--fg-80); text-wrap: pretty; }
.cov__item--5 .cov__p { color: color-mix(in oklab, var(--paper-soft) 84%, transparent); }
.cov__item::before, .cov__item::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--gauge);
  background: var(--fg-08); }
.cov__item::after { background: var(--seg); transform-origin: 50% 0; }
.cov__item--5::before { background: color-mix(in oklab, var(--paper-soft) 14%, transparent); }
@media (40rem <= width < 80rem) {
  .cov { --gauge: 10px; --pad: 32px; }
  .cov__item:not(.cov__item--5) { grid-template-columns: 13.5rem minmax(0, 1fr); column-gap: 32px;
    padding-right: calc(var(--pad) + 2.5rem); padding-bottom: 36px; }
  .cov__item:not(.cov__item--5) .cov__t { grid-column: 1; grid-row: 1; align-self: baseline; margin: 0; padding-right: 0; }
  .cov__item:not(.cov__item--5) .cov__p { grid-column: 2; grid-row: 1; align-self: baseline; font-size: 1.0625rem; line-height: 1.58; }
  .cov__item--5 .cov__icon { width: 48px; height: 48px; margin-bottom: 20px; }
  .cov__item--5 .cov__t { font-size: 2.25rem; }
  .cov__item--5 .cov__p { max-width: 38rem; font-size: 1.0625rem; }
}
@media (min-width: 80rem) {
  .cov { --gauge: 10px; --pad: 28px; }
  .cov__list { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(17rem, min(22vw, 24rem)); grid-template-rows: repeat(4, auto); }
  .cov__item { grid-row: 1 / span 4; grid-template-rows: subgrid; row-gap: 0; padding: var(--pad) var(--pad) 26px; }
  .cov__item--1 { grid-column: 1; }
  .cov__item--2 { grid-column: 2; }
  .cov__item--3 { grid-column: 3; }
  .cov__item--4 { grid-column: 4; }
  .cov__item--5 { grid-column: 5; }
  .cov__item--5 .cov__icon { position: absolute; top: var(--pad); right: var(--pad); width: 44px; height: 44px; margin: 0; }
  .cov__t, .cov__item--5 .cov__t { grid-row: 1; margin-bottom: 12px; padding-right: 0; font-size: clamp(1.5rem, 2vw, 1.875rem); }
  .cov__item--5 .cov__t { padding-right: 56px; }
  .cov__p { grid-row: 2; font-size: var(--p-row); line-height: 1.55; }
  .cov__item::before, .cov__item::after { position: static; grid-column: 1; grid-row: 3; align-self: center; width: auto;
    height: var(--gauge); margin: 40px calc(var(--pad) * -1) 0; }
  .cov__item::after { transform-origin: 0 50%; }
  .cov__item--1::before, .cov__item--1::after { margin-left: 0; border-radius: calc(var(--gauge) / 2) 0 0 calc(var(--gauge) / 2); }
  .cov__item--5::before, .cov__item--5::after { margin-right: 0; border-radius: 0 calc(var(--gauge) / 2) calc(var(--gauge) / 2) 0; }
  .cov__num { position: static; grid-row: 4; margin: 14px 0 0; font-size: .875rem; }
}
.cov[data-cov-play] .cov__item {
  &::after { transform: scale(1, 0); }
  &.is-in::after { transform: none; transition: transform .5s cubic-bezier(.45, 0, .55, 1) calc(var(--cov-i, 0) * 500ms); }
  @media (min-width: 80rem) {
    &::after { transform: scale(0, 1); }
    &.is-in::after { transition: transform .32s linear calc(var(--cov-i, 0) * 320ms); }
  }
}
@media (prefers-reduced-motion: reduce) { .cov__item::after { transition: none !important; transform: none !important; } }