@layer components {
  .column-links {
    inline-size: 100%;
    block-size: 174.75cqi;
    padding-block: 12cqi;
    padding-inline: 6cqi 6.5cqi;
    background-color: oklch(97.015% 0 89.88);
  }

  .column-links__inner {
    display: flex;
    flex-direction: column;
    gap: 6.25cqi;
    inline-size: 87.5cqi;
    block-size: 150.75cqi;
  }

  .column-links__title {
    inline-size: 100%;
    color: oklch(31.714% 0 89.88);
    font-family: var(--font-hero);
    font-size: 6.5cqi;
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: 0.325cqi;
    text-align: center;
    white-space: nowrap;
  }

  .column-links__list {
    display: flex;
    flex-direction: column;
    gap: 2.5cqi;
    inline-size: 100%;
    color: oklch(31.987% 0.21441 264.15);
    font-size: 4cqi;
    font-weight: 400;
    line-height: 1.375;
    letter-spacing: 0.2cqi;
  }

  .column-links__link {
    display: block;
    color: inherit;
    text-decoration-line: underline;
    text-decoration-thickness: 0.25cqi;
    text-underline-offset: 0.45cqi;
  }

  .column-links__link:hover {
    opacity: 0.82;
  }
}