@layer component {
  .a-z {
    .a-z__title {
      margin-block-end: 32px;
      text-align: center;

      /* @media (width >= calc(600 / 16 * 1rem)) {
        margin-block-end: 48px;
      } */
    }

    .a-z__meta {
      font-style: italic;
      font-weight: 300;
      margin-block-end: 24px;
      font-size: var(--fs-18);

      @media (width >= calc(600 / 16 * 1rem)) {
        font-size: var(--fs-20);
      }
    }

    .a-z__alphabet-container {
      overflow-x: auto;
      scroll-behavior: smooth;
      padding-block-end: 8px;
      margin-block-end: 32px;

      @media (width >= calc(600 / 16 * 1rem)) {
        margin: 0 auto 32px;
        max-width: 800px;
        padding-block-end: 0;
      }
    }

    .a-z__alphabet-nav {
      display: flex;
      flex-wrap: nowrap;
      gap: 8px;

      @media (width >= calc(600 / 16 * 1rem)) {
        flex-wrap: wrap;
        justify-content: center;
      }
    }

    .a-z__nav-link {
      --tile-bg-color: var(--card-bg-color);
      --tile-bg-color-active: var(--c-purple);

      --tile-border-color: var(--card-border-color);
      --tile-border-color-active: transparent;

      --tile-text-color: var(--color-text-dark);
      --tile-text-color-active: var(--color-text-light);

      flex: 0 0 auto;
      min-width: 54px;
      min-height: 54px;
      display: grid;
      place-content: center;
      padding-inline: 2px;

      color: var(--tile-text-color);
      background-color: var(--tile-bg-color);
      border: 1px solid var(--tile-border-color);
      border-radius: 4px;

      transition: 150ms ease-in-out;
      transition-property: background-color, border-color, color;

      &:hover:not(.is-active) {
        background-color: var(--tile-bg-color-active);
        border-color: var(--tile-border-color-active);
        color: var(--tile-text-color-active);
      }

      &.is-active {
        background-color: var(--tile-bg-color-active);
        color: var(--tile-text-color-active);
        border-color: var(--tile-border-color-active);
        font-weight: 500;
      }

      @media (width >= calc(600 / 16 * 1rem)) {
        min-width: 44px;
        min-height: 44px;
      }
    }
  }
}