@layer snippets{
  [ui-block=collection]{
    --bg-shade-color:oklch(from var(--bg-color) calc(l - 0.0225 * (1 - 2 * clamp(0, (0.5 - l) * 9999, 1)) + 0.16 * clamp(0, (0.25 - l) * 4, 1)) calc(c + 0.0181 * clamp(0, c * 200, 1)) calc(h + 6.6));
    display:flex;
    gap:var(--spacing-16);
    flex-direction:column;
  }
  [ui-block=collection] .media{
    height:auto;
    overflow:hidden;
    border-radius:var(--radius-collection);
  }
  [ui-block=collection] .media[data-image-ratio=square]{
    aspect-ratio:1/1;
  }
  [ui-block=collection] .media[data-image-ratio=portrait]{
    aspect-ratio:3/4;
  }
  [ui-block=collection] .media[data-image-ratio=landscape]{
    aspect-ratio:4/3;
  }
  [ui-block=collection] .media > img{
    -o-object-fit:cover;
       object-fit:cover;
  }
  [ui-block=collection] .media ui-image-fallback{
    background-color:var(--bg-shade-color);
  }
  [ui-block=collection] .title{
    flex:1;
    justify-content:var(--collection-alignment) !important;
    font:var(--font-label-md) !important;
  }
}