@layer component {
  .collections {
    .coll__wrapper {
      padding-block-end: 100px;
    }
    .collections__title {
      margin-block-end: 32px;
      text-align: center;

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

    .collections__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      grid-auto-rows: 1fr auto; /* Each title/header takes up equal height */
      gap: 16px;
      list-style: none;
      padding: 0;

      @media (width >= calc(600 / 16 * 1rem)) {
        gap: 20px 24px;
      }
    }

    .collections__card {
      /* --card-bg: var(--c-gray-light, gray);
      --card-bg-hover: var(--c-gray-lighter, lightgray); */
      --card-bg: hsl(var(--hue-primary), 15%, 85%);
      --card-bg-hover: hsl(var(--hue-primary), 15%, 90%);

      position: relative;
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 2;
      align-items: end;
      background-color: var(--card-bg);
      padding: 32px 16px;
      border-radius: 16px;
      transition: 150ms ease;
      transition-property: background-color, box-shadow;
      /* min-height: 250px; */

      &:hover {
        background-color: var(--card-bg-hover);
      }

      &:focus-within {
        background-color: var(--card-bg-hover);

        .collections__arrow {
          transform: translateX(0);
        }
      }

      &:hover .collections__arrow {
        transform: translateX(0);
      }
    }

    .collections__card-header {
      display: flex;
      justify-content: space-between;
      align-items: last baseline;
      gap: 1em;
      /* min-height: 100px; */
    }

    .collections__card-title {
      min-width: 0; /* Important to avoid flex text wrapping */
    }

    .collections__card-main-link {
    }

    .collections__arrow {
      transform: translateX(-6px);
      transition: transform 150ms ease;
    }

    .collections__description {
      align-self: start;
    }
  }
}