@layer sections{
  #youcan-section--search{
    display:flex;
    flex:1;
    flex-direction:column;
  }
  #youcan-section--search [ui-section=search]{
    display:flex;
    flex:1;
    flex-direction:column;
    padding:var(--top-spacing) 8% var(--bottom-spacing) !important;
    gap:var(--spacing-32);
  }
  #youcan-section--search [ui-section=search] [ui-slot=head]{
    align-items:center;
  }
  #youcan-section--search [ui-section=search] [ui-slot=head] .search{
    width:500px;
  }
  #youcan-section--search [ui-section=search] .controller{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  #youcan-section--search [ui-section=search] .controller .result{
    color:var(--color-on-surface-variant);
    font:var(--font-body-lg);
  }
  #youcan-section--search [ui-section=search] .controller .sort{
    display:flex;
    align-items:center;
    gap:var(--spacing-12);
  }
  #youcan-section--search [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);
  }
  @media (max-width: 1024px){
    #youcan-section--search [ui-section=search] .list{
      grid-template-columns:repeat(3, 1fr);
    }
  }
  @media (max-width: 769px){
    #youcan-section--search [ui-section=search] [ui-slot=head]{
      align-items:center;
    }
    #youcan-section--search [ui-section=search] [ui-slot=head] .search{
      width:100%;
    }
    #youcan-section--search [ui-section=search] .list{
      grid-template-columns:repeat(2, 1fr);
    }
  }
}