@layer gala-components {
  /* Skin rules only: the template's gala-base layer owns layout. */
  /* A flat magazine card: the base layer paints every card with the surface
     colour, which here differs from the canvas and left the text flush
     against the edges of a slab. This theme's card paints nothing (the
     tokens already say no border, no shadow, no inset), so the title,
     excerpt and meta line up with the media's left edge. */
  [data-gala-publication-root] .g-card {
    background: transparent;
    box-shadow: var(--gala-shadow-card);
    transition-duration: var(--gala-duration-base);
  }

  /* Rows stack the media above the text at 640px and below (the base layer's
     breakpoint). The card paints nothing, so the text lines up with the
     media's edge: 1rem 0 is the base layer's own block padding at this width
     with the sides removed. Side by side, the padding keeps text off the image. */
  @media (max-width: 640px) {
    [data-gala-publication-root] .g-card-row .g-card-body {
      padding: 1rem 0;
    }
  }

  [data-gala-publication-root] .g-card:hover {
    box-shadow: var(--gala-shadow-card-hover);
    transform: translate(var(--gala-lift-x), var(--gala-lift-y));
  }

  [data-gala-publication-root] .g-chip {
    background: var(--gala-paint-chip);
    text-transform: var(--gala-label-transform);
  }

  [data-gala-publication-root] .g-avatar {
    border-radius: var(--gala-radius-avatar);
  }

  [data-gala-publication-root] li {
    padding-top: var(--gala-space-1);
  }

  [data-gala-publication-root] strong {
    font-weight: var(--gala-weight-strong);
  }
}