/* Created by Content Blocks */

.litterlist {
  --_clr-accent: var(--clr-brand--primary);
  --_clr-header: var(--clr-brand--primary);
  --_clr-headerbg: transparent;
  --_border--radius: var(--border-radius);

  container: litterlist / inline-size;

  .litters {
    display: grid;
    gap: calc(2 * var(--gutter));
  }

  .littercard {
    display: grid;
    gap: var(--gutter);
    grid-template-columns: 1fr;
    @container litterlist (width > 480px) {
      grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    }
    border: 1px solid var(--_clr-accent);
    border-radius: var(--_border--radius);
    overflow: clip;
  }

  .littercard > *:not(.littercard--images) {
    padding: calc(var(--gutter)/2);
  }

  .littercard--header {
    grid-column: 1 / -1;
    color: var(--_clr-header);
    background-color: var(--_clr-headerbg);
    border-block-end: 1px solid var(--_clr-accent);
    @container litterlist (width > 480px) {
      display: grid;
      grid-auto-flow: column;
      gap: var(--gutter);
      justify-content: space-between;
    }
  }
  .littercard--parents > div {
    margin-block-end: var(--gutter);
  }

  .littercard--images {
    grid-column: 1 / -1;
    .gallery {
      gap: 0;
      grid-template-columns: 1fr;
      figure {
        max-width: 100%;
      }
      @container litterlist (width > 480px) {
        grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
      }
    }
  }
}