@layer components {
  .catalogue {
    display: grid;
    gap: var(--space-lg-x1);
  }

  .catalogue__card {
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    border-radius: var(--border-radius-3);
    overflow: clip;
    box-shadow: var(--shadow-3);
    max-width: var(--max-reach-md);
    margin-inline: auto;
    transition: all 300ms;
    height: 100%;

    img {
      aspect-ratio: 16 / 9;
      object-fit: contain;
      padding: var(--space-md);
    }
  }

  .catalogue__card-text-container {
    padding: var(--space-md);
    color: var(--color-white);
    background-color: var(--color-primary-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm-x3);
    width: 100%;
    flex-grow: 1;
    transition: inherit;

    h2 {
      font-size: var(--font-size-lg-x1);
      font-weight: var(--font-weight-bold);
    }

    p {
      font-size: var(--font-size-sm-x1);
      padding-block-end: var(--space-md);
    }
  }

  .catalogue__card-button {
    margin-block-start: auto;
    font-size: var(--font-size-sm-x1);
  }

  @media (any-hover: hover) {
    .catalogue__card:hover {
      scale: 0.98;

      .catalogue__card-text-container {
        background-color: var(--color-primary-5);
      }
    }
  }

  .catalogue__card:active {
    scale: 0.94;

    .catalogue__card-text-container {
      background-color: var(--color-primary-7);
    }
  }

  /* break-sm-x1: 40rem (640px) */
  @media (width >=40rem) {
  }

  /* break-md: 48rem (768px) */
  @media (width >=48rem) {
    .catalogue {
      gap: var(--space-md);
      grid-template-columns: repeat(2, 1fr);
    }
  }

  /* break-lg-x1: 64rem (1024px) */
  @media (width >=64rem) {
    .catalogue {
      grid-template-columns: 1fr;
      gap: var(--space-lg-x1);
    }

    .catalogue__card {
      flex-direction: row;
      max-width: none;

      img {
        width: var(--length-80);
        height: 100%;
        max-height: var(--length-52);
        margin-block: auto;
        aspect-ratio: unset;
        flex-shrink: 0;
        padding: var(--space-lg-x1);
      }
    }
  }

  /* break-lg-x2: 80rem (1280px) */
  @media (width >=80rem) {
  }
}