@layer snippets{
  [ui-block=collection]{
    --bg-shade-color:oklch(from var(--bg-color) calc(l - 0.0225) calc(c + 0.0181) 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;
  }
}