@layer sections{
  [ui-section=single-collection]{
    display:flex;
    gap:var(--spacing-64);
    flex-direction:column;
    padding:var(--top-spacing) 8% var(--bottom-spacing) !important;
  }
  [ui-section=single-collection] [ui-slot=breadcrumb] [ui-slot=breadcrumb-group]{
    justify-content:var(--text-heading-alignment-desktop);
  }
  [ui-section=single-collection] .sub-collections-area{
    --gap:var(--spacing-12);
  }
  [ui-section=single-collection] .sub-collections-area .sub-collection > a{
    display:flex;
    position:relative;
    align-items:center;
    justify-content:center;
    height:15vh;
    overflow:hidden;
    border-radius:var(--radius-20);
  }
  [ui-section=single-collection] .sub-collections-area .sub-collection > a .media{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    filter:brightness(0.8);
    transition:scale var(--transition-standard-default-spatial);
  }
  [ui-section=single-collection] .sub-collections-area .sub-collection > a .title{
    position:relative;
    font:var(--font-title-md);
  }
  [ui-section=single-collection] .sub-collections-area .sub-collection > a:hover .media{
    scale:1.1;
  }
  [ui-section=single-collection] .core-area{
    display:grid;
    grid-gap:var(--spacing-32);
    gap:var(--spacing-32);
  }
  [ui-section=single-collection] .core-area .controller{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  [ui-section=single-collection] .core-area .controller .result{
    color:var(--color-on-surface-variant);
    font:var(--font-body-lg);
  }
  [ui-section=single-collection] .core-area .controller .sort{
    display:flex;
    align-items:center;
    gap:var(--spacing-12);
  }
  [ui-section=single-collection] .core-area .items{
    display:grid;
    grid-template-columns:repeat(var(--nbr-columns-desktop), 1fr);
    grid-gap:var(--spacing-24);
    gap:var(--spacing-24);
  }
  @media (min-width: 1024.02px){
    [ui-section=single-collection] .sub-collections-area{
      display:grid !important;
      grid-template-columns:repeat(5, 1fr);
    }
  }
  @media (max-width: 1024px){
    [ui-section=single-collection] .sub-collections-area{
      --per-page:2;
      --item-size:92%;
      display:flex;
    }
    [ui-section=single-collection] .sub-collections-area .sub-collection > a{
      height:20vh;
    }
    [ui-section=single-collection] .core-area .items{
      grid-template-columns:repeat(3, 1fr);
    }
  }
  @media (max-width: 769px){
    [ui-section=single-collection] [ui-slot=breadcrumb] [ui-slot=breadcrumb-group]{
      justify-content:var(--text-heading-alignment-mobile);
    }
    [ui-section=single-collection] .sub-collections-area{
      position:relative;
      width:calc(100% + var(--spacing-48));
      padding-left:var(--spacing-24);
      padding-right:var(--spacing-24);
      left:calc(var(--spacing-24) * -1);
    }
    [ui-section=single-collection] .sub-collections-area .sub-collection > a{
      flex-direction:column;
      align-items:start;
      height:auto;
      border:none;
      border-radius:var(--radius-0);
      gap:var(--spacing-12);
    }
    [ui-section=single-collection] .sub-collections-area .sub-collection > a .media{
      position:static;
      width:100%;
      height:13vh;
      overflow:hidden;
      filter:none;
      border-radius:var(--radius-20);
    }
    [ui-section=single-collection] .sub-collections-area .sub-collection > a .title{
      font:var(--font-body-lg);
    }
    [ui-section=single-collection] .sub-collections-area .sub-collection > a:hover .media{
      scale:1;
    }
    [ui-section=single-collection] .core-area .items{
      grid-template-columns:repeat(2, 1fr);
    }
  }
  @media (min-width: 769.02px){
    [data-intensity=as-foreground] [ui-section=single-collection] .sub-collections-area .sub-collection > a .title,
    [data-intensity=as-light-bg] [ui-section=single-collection] .sub-collections-area .sub-collection > a .title{
      color:var(--color-on-primary);
    }
  }
  @media (max-width: 769px){
    [data-intensity=as-foreground] [ui-section=single-collection] .sub-collections-area .sub-collection > a .title,
    [data-intensity=as-light-bg] [ui-section=single-collection] .sub-collections-area .sub-collection > a .title{
      color:var(--color-primary);
    }
  }
  [data-intensity=as-solid-bg] [ui-section=single-collection] .sub-collections-area .sub-collection > a .title{
    color:var(--color-primary);
  }
}