fizzy/app/assets/stylesheets/card-columns.css

@layer components {
  /* Coluns
  /* -------------------------------------------------------------------------- */

  /* Card contents are resized via container queries. We're using #main here as
     the primary container so all cards have the same container reference */
  #main:has(.card-columns) {
    container-type: inline-size;
    max-inline-size: 1400px;
  }

  .card-columns {
    --bubble-size: 4rem;
    --bubble-gap: 0.5rem;

    display: grid;
    grid-template-columns: repeat(2, 50%);
    margin: auto;
    max-inline-size: calc(100% - (var(--bubble-size) + var(--bubble-gap)) * 2);
    position: relative;

    &:before {
      background: linear-gradient(to right,var(--color-canvas), var(--color-ink-lighter) 3%, var(--color-ink-lighter) 97%, var(--color-canvas));
      block-size: 1px;
      content: "";
      display: block;
      inline-size: calc(100% + 1.2em);
      inset: 0 -0.6em 100% -0.6em;
      position: absolute;
    }

    .cards:first-child {
      padding-inline-end: var(--cards-gap);
      position: relative;

      &:after {
        background: linear-gradient(var(--color-canvas), var(--color-ink-lighter) 1%, var(--color-ink-lighter) 99%, var(--color-canvas));
        block-size: calc(100% + 1.2em);
        content: "";
        display: block;
        inline-size: 1px;
        inset: -0.6em 0 -0.6em 100%;
        position: absolute;
      }
    }

    .cards:last-child {
      padding-inline-start: var(--cards-gap);
    }
  }

  /* Cards
  /* -------------------------------------------------------------------------- */

  .cards {
    --cards-gap: 2cqi;

    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--cards-gap);
    justify-content: start;
    padding-block: calc(var(--cards-gap) * 0.75);

    .card {
      --block-space: 1em;
      --block-space-half: 0.5em;
      --text-xx-large: 2em;

      /* Set lower limit for font size */
      font-size: clamp(0.45rem, 0.85cqi, 100px);
    }

    .card__title {
      pointer-events: none;
    }

    .card__link {
      z-index: 1;
    }

    .card__hide-on-index {
      display: none;
    }
  }

  .cards__heading {
    display: inline-flex;
    font-size: var(--text-medium);
    inline-size: 100%;
    justify-content: center;
    text-transform: uppercase;
  }

  /* Considering
  /* ------------------------------------------------------------------------ */

  .cards--considering {
    .card {
      --text-xx-large: 1.6em;
      --text-small: 1.1em;

      background-color: var(--color-canvas);
      line-height: 1.2;

      .avatar {
        block-size: 2.75em;
        inline-size: 2.75em;
      }
    }

    .card--drafted {
      --card-color: var(--color-ink-medium) !important;

      border-color: var(--card-color) !important;
      border-style: dashed !important;
      box-shadow: none !important;
    }

    .card__background {
      display: none;
    }

    .card__collection {
      background-color: var(--color-canvas);
      color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
      padding: 0 0 0 var(--inline-space);
    }

    .card__collection-name {
      border-inline-start: 1px solid color-mix(in srgb, var(--color-ink) 33%, var(--color-canvas));
      color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
    }

    .card__header {
      color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
      margin: 0 0 calc(-0.5 * var(--card-padding-inline)) 0;
    }

    .card__title {
      margin-block-start: 0.1em;
      min-block-size: 0;
    }

    .card__people-label {
      display: none;
    }

    .card__body {
      padding-inline: 0;
    }

    .card__tags {
      font-size: var(--text-small);
    }
  }

  /* Closed
  /* -------------------------------------------------------------------------- */

  .cards--closed {
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    inline-size: 100%;
    margin: 0 auto;
    position: relative;

    &:before {
      background: linear-gradient(to right,var(--color-canvas), var(--color-ink-lighter) 3%, var(--color-ink-lighter) 97%, var(--color-canvas));
      block-size: 1px;
      content: "";
      display: block;
      inline-size: calc(100% + 1.2em);
      inset: 0 -0.6em 100% -0.6em;
      position: absolute;
    }

    .card {
      inline-size: calc((100% - var(--cards-gap) * 2) / 3);

      @media (max-width: 960px) {
        inline-size: calc((100% - var(--cards-gap)) / 2);
      }

      &:nth-of-type(7) {
        margin-block-start: var(--cards-gap);
      }

      &:nth-of-type(n+7) {
        background-color: var(--color-canvas);
        border: none;
        border-block-end: 1px solid var(--color-ink-lighter);
        box-shadow: none;
        inline-size: 100%;
        margin-inline: auto;
        max-inline-size: 110ch;
        padding-block: 0 var(--cards-gap);

        .card__background,
        .card__meta {
          display: none;
        }

        .card__body {
          padding-block-end: 0;
        }

        .card__closed {
          aspect-ratio: unset;
          border-width: 0.5ch;
          font-size: 0.75em;
          inset: auto 0 auto auto;
          transform: none;
        }

        .card__closed-by-line,
        .card__closed-date {
          display: none;
        }

        .card__header {
          margin: 0;
        }

        .card__title {
          min-block-size: 0;
        }
      }
    }
  }
}