.fit {
  position: relative;
  min-height: 92vh;
  overflow: hidden;
  padding-block: clamp(112px, 17vh, 190px);
  background: var(--tone-warm);
  color: var(--ink);
}

.fit__inner {
  position: relative;
  z-index: 2;
}

.fit__title {
  max-width: 9ch;
  margin: 0;
}

.fit__columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(72px, 10vw, 136px);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}

.fit__column {
  min-width: 0;
  padding: clamp(32px, 4vw, 58px);
  border-left: 1px solid var(--line);
}

.fit__column:first-child {
  border-left: 0;
}

.fit__label {
  margin: 0;
  color: var(--muted);
}

.fit__name {
  margin: 28px 0 0;
}

.fit__copy {
  max-width: 30ch;
  margin: 24px 0 0;
  color: var(--muted);
}

.fit__mist {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.fit__mist span {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
}

.fit__mist span:first-child {
  top: -18%;
  left: -22%;
  width: 78vw;
  height: 66vh;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--platinum) 10%, transparent),
    transparent 72%
  );
  animation: fit-mist-one 128s linear infinite alternate;
}

.fit__mist span:last-child {
  right: -24%;
  bottom: -28%;
  width: 72vw;
  height: 62vh;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--surface) 45%, transparent),
    transparent 74%
  );
  animation: fit-mist-two 104s linear infinite alternate;
}

@keyframes fit-mist-one {
  to {
    transform: translate(12vw, 6vh);
  }
}

@keyframes fit-mist-two {
  to {
    transform: translate(-10vw, -7vh);
  }
}

@media (max-width: 700px) {
  .fit {
    min-height: auto;
    padding-block: 104px;
  }

  .fit__columns {
    grid-template-columns: 1fr;
    margin-top: 64px;
    border-bottom: 0;
  }

  .fit__column {
    padding: 34px 0 40px;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .fit__column:first-child {
    border-top: 0;
  }

  .fit__copy {
    max-width: 34ch;
  }
}