@layer sections{
  [ui-section=search]{
    --bg-shade-color:oklch(from var(--bg-color) calc(l - 0.0225) calc(c + 0.0181) calc(h + 6.6));
    display:flex;
    flex:1;
    flex-direction:column;
    gap:var(--spacing-32);
  }
  [ui-section=search] [ui-slot=head]{
    align-items:center;
  }
  [ui-section=search] [ui-slot=head] .search{
    width:min(688px, 100%);
  }
  [ui-section=search] [ui-slot=head] .search [ui-slot=input-wrapper]{
    background-color:var(--bg-shade-color);
  }
  [ui-section=search] [ui-slot=head] .search [ui-slot=input-inline-button]{
    width:24px;
    height:100%;
  }
  [ui-section=search] .controller{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  [ui-section=search] .controller .result{
    color:var(--fg-color);
    font:var(--font-body-sm);
  }
  [ui-section=search] .controller .sort{
    display:flex;
    align-items:center;
    gap:var(--spacing-12);
    font:var(--font-label-md);
  }
  [ui-section=search] .list{
    display:grid;
    grid-template-columns:repeat(var(--nbr-columns-desktop), 1fr);
    width:100%;
    grid-gap:var(--spacing-24);
    gap:var(--spacing-24);
  }
  [ui-section=search] [ui-slot=sheet-content]{
    --sheet-background:var(--bg-color);
    color:var(--fg-color);
  }
  [ui-section=search] [ui-slot=sheet-content] [ui-slot=sheet-header] [ui-slot=button]{
    --button-bg:var(--bg-shade-color);
    --button-fg:var(--fg-color);
  }
  @media (max-width: 1280px){
    [ui-section=search] .list{
      grid-template-columns:repeat(3, 1fr);
    }
  }
  @media (max-width: 769px){
    [ui-section=search] [ui-slot=head]{
      align-items:center;
    }
    [ui-section=search] [ui-slot=head] .search{
      width:100%;
    }
    [ui-section=search] .list{
      grid-template-columns:1fr;
    }
  }
}