@layer sections{
  [ui-section=collections]{
    --per-page:2;
    --gap:var(--spacing-32);
    --item-size:92%;
    display:grid;
    grid-template-columns:40% auto;
    align-items:flex-start;
    grid-gap:var(--spacing-32);
    gap:var(--spacing-32);
    padding-top:var(--top-spacing) !important;
    padding-bottom:var(--bottom-spacing) !important;
  }
  [ui-section=collections] .content-area{
    display:grid;
    grid-gap:var(--spacing-16);
    gap:var(--spacing-16);
    width:100%;
    padding-right:8%;
  }
  [ui-section=collections] .content-area .actions{
    display:flex;
    justify-content:var(--text-heading-alignment-desktop);
    margin-top:var(--spacing-8);
    gap:var(--spacing-24);
  }
  [ui-section=collections] .items-area{
    width:100%;
    padding-right:16%;
  }
  @media (max-width: 1280px){
    [ui-section=collections]{
      --per-page:1;
    }
  }
  @media (max-width: 1028px){
    [ui-section=collections]{
      --per-page:2;
      gap:var(--spacing-48);
      display:flex;
      flex-direction:column;
    }
    [ui-section=collections] .items-area{
      padding-right:8%;
    }
  }
  @media (max-width: 769px){
    [ui-section=collections]{
      --per-page:1;
      --item-size:84%;
    }
    [ui-section=collections] .content-area{
      padding-right:var(--spacing-24);
    }
    [ui-section=collections] .content-area .actions{
      justify-content:var(--text-heading-alignment-mobile);
    }
  }
}