@layer components {
  :where(.p-column-archive__grid) {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--lg);
  }

  @media (min-width: 768px) {
    :where(.p-column-archive__grid) {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1024px) {
    :where(.p-column-archive__grid) {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  :where(.c-column-card) {
    background: var(--wp--preset--color--white);
    border: 1px solid var(--wp--preset--color--primary-lighter);
    border-radius: var(--wp--custom--radius--md);
    overflow: hidden;
  }

  :where(.c-column-card__link) {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    color: inherit;
    text-decoration: none;
  }

  :where(.c-column-card__link:hover) {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  :where(.c-column-card__thumbnail) {
    aspect-ratio: 4 / 3;
    background: var(--wp--preset--color--primary-lightest);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  :where(.c-column-card__thumbnail img) {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }

  :where(.c-column-card__thumbnail--placeholder img) {
    width: auto;
    height: 80% !important;
    object-fit: cover;
  }

  :where(.c-column-card__content) {
    padding: var(--wp--preset--spacing--lg);
    display: grid;
    gap: var(--wp--preset--spacing--sm);
  }

  :where(.c-column-card__meta) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--sm);
    align-items: baseline;
    font-size: 1.3rem;
    opacity: 0.9;
  }

  :where(.c-column-card__title) {
    margin: 0;
    text-align: left;
    font-weight: var(--wp--custom--font-weight--bold);
    font-size: var(--wp--preset--font-size--lg);
    line-height: 1.4;
    color: var(--wp--preset--color--basic-text);
  }

  :where(.c-column-card__excerpt) {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.7;
    opacity: 0.95;
  }

  :where(.c-column-card__category) {
    display: inline-flex;
    align-items: left;
    padding: 0.15em 0.6em;
    border-radius: var(--wp--custom--radius--sm);
    background: var(--wp--preset--color--primary-lightest);
    border: 1px solid var(--wp--preset--color--primary-lighter);
    font-size: 1.2rem;
    white-space: nowrap;
  }

  @media (max-width: 600px) {
    :where(.c-column-card__content) {
      padding: var(--wp--preset--spacing--base);
    }

    :where(.c-column-card__title) {
      font-size: var(--wp--preset--font-size--md);
    }
  }
}