@layer sections{
  [ui-section=featured-collection]{
    display:flex;
    gap:var(--spacing-32);
  }
  [ui-section=featured-collection] .banner{
    position:sticky;
    align-self:start;
    width:400px;
    height:640px;
    overflow:hidden;
    border-radius:var(--radius-card);
    background-color:oklch(from var(--bg-color) calc(l - 0.0225) calc(c + 0.0181) calc(h + 6.6));
    inset-block-start:var(--spacing-16);
  }
  [ui-section=featured-collection] .banner[data-banner-placement=first]{
    order:-1;
  }
  [ui-section=featured-collection] .banner[data-banner-placement=second]{
    order:1;
  }
  [ui-section=featured-collection] .banner .content{
    display:flex;
    position:relative;
    z-index:2;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    padding:var(--spacing-24);
    gap:var(--spacing-32);
    color:var(--fg-color);
    text-align:center;
  }
  [ui-section=featured-collection] .banner .content .description{
    opacity:0.72;
  }
  [ui-section=featured-collection] .banner .content [ui-slot=button]{
    min-width:180px;
  }
  [ui-section=featured-collection] .banner .content [ui-slot=button][data-variant=secondary] [ui-slot=button-front]{
    color:var(--fg-color);
  }
  [ui-section=featured-collection] .banner .media{
    position:absolute;
    inset:0;
    z-index:1;
  }
  [ui-section=featured-collection] .banner .media img{
    opacity:var(--banner-image-opacity);
    -o-object-fit:cover;
       object-fit:cover;
  }
  [ui-section=featured-collection] .products{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    flex:1;
    grid-gap:var(--spacing-32);
    gap:var(--spacing-32);
    height:-moz-fit-content;
    height:fit-content;
  }
  [ui-section=featured-collection] .products [ui-block=content]{
    position:sticky;
    height:-moz-fit-content;
    height:fit-content;
    overflow:hidden;
    border-radius:var(--radius-20);
    inset-block-start:var(--spacing-24);
  }
  [ui-section=featured-collection] .products [ui-block=content][data-image-ratio=square]{
    aspect-ratio:1/1;
  }
  [ui-section=featured-collection] .products [ui-block=content][data-image-ratio=portrait]{
    aspect-ratio:3/4;
  }
  [ui-section=featured-collection] .products [ui-block=content][data-image-ratio=landscape]{
    aspect-ratio:4/3;
  }
  [ui-section=featured-collection] .products [ui-block=products]{
    display:grid;
    grid-gap:var(--spacing-24);
    gap:var(--spacing-24);
    grid-template-columns:repeat(2, 1fr);
  }
  [ui-section=featured-collection] .products:not(:has([ui-block=content])){
    grid-template-columns:1fr;
  }
  [ui-section=featured-collection] .products:not(:has([ui-block=content])) [ui-block=products]{
    grid-template-columns:repeat(auto-fill, minmax(288px, 1fr));
  }
  @media (max-width: 1024px){
    [ui-section=featured-collection]{
      flex-direction:column;
      gap:var(--spacing-32);
    }
    [ui-section=featured-collection] .banner{
      position:relative;
      width:100%;
      height:-moz-fit-content;
      height:fit-content;
    }
    [ui-section=featured-collection] .products{
      grid-template-columns:1fr;
    }
    [ui-section=featured-collection] .products [ui-block=content]{
      position:relative;
    }
    [ui-section=featured-collection] .products [ui-block=content] .content{
      padding:var(--spacing-24);
    }
    [ui-section=featured-collection] .products [ui-block=products]{
      gap:var(--spacing-12);
    }
  }
}