@layer sections{
  [ui-section=slideshow]{
    --per-page:1;
    --item-size:100%;
    display:flex;
    flex-direction:column;
    gap:var(--spacing-16);
  }
  [ui-section=slideshow] [ui-slot=carousel]{
    gap:var(--spacing-16);
  }
  [ui-section=slideshow] [ui-slot=carousel] [ui-slot=carousel-item]{
    position:relative;
    height:max(var(--height), 240px);
    background-color:transparent !important;
  }
  [ui-section=slideshow] [ui-slot=carousel] [ui-slot=carousel-item] .slide-wrapper{
    display:flex;
    height:100%;
    gap:var(--spacing-8);
  }
  [ui-section=slideshow] [ui-slot=carousel] [ui-slot=carousel-item] .slide-wrapper .first-img,
  [ui-section=slideshow] [ui-slot=carousel] [ui-slot=carousel-item] .slide-wrapper .second-img{
    flex:1;
    overflow:hidden;
    border-radius:var(--radius-28);
  }
  @media (max-width: 769px){
    [ui-section=slideshow] [ui-slot=carousel] [ui-slot=carousel-item] .slide-wrapper .first-img,
    [ui-section=slideshow] [ui-slot=carousel] [ui-slot=carousel-item] .slide-wrapper .second-img{
      display:none;
    }
  }
  [ui-section=slideshow] [ui-slot=carousel] [ui-slot=carousel-item] .slide-wrapper .main-content{
    position:relative;
    flex:2;
    order:var(--content-order);
    padding:var(--spacing-32);
    overflow:hidden;
    border-radius:var(--radius-slide);
    background-color:var(--slide-bg);
    color:var(--slide-fg);
  }
  [ui-section=slideshow] [ui-slot=carousel] [ui-slot=carousel-item] .slide-wrapper .main-content .media{
    position:absolute;
    inset:0;
    z-index:1;
  }
  [ui-section=slideshow] [ui-slot=carousel] [ui-slot=carousel-item] .slide-wrapper .main-content .media img{
    opacity:var(--content-image-opacity);
  }
  [ui-section=slideshow] [ui-slot=carousel] [ui-slot=carousel-item] .slide-wrapper .main-content .content{
    display:flex;
    position:relative;
    z-index:2;
    flex-direction:column;
    height:100%;
    gap:var(--spacing-32);
  }
  [ui-section=slideshow] [ui-slot=carousel] [ui-slot=carousel-item] .slide-wrapper .main-content .content [ui-slot=head],
  [ui-section=slideshow] [ui-slot=carousel] [ui-slot=carousel-item] .slide-wrapper .main-content .content .actions{
    width:100%;
  }
  [ui-section=slideshow] [ui-slot=carousel] [ui-slot=carousel-item] .slide-wrapper .main-content .content [ui-slot=head] .heading{
    display:-webkit-box;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }
  [ui-section=slideshow] [ui-slot=carousel] [ui-slot=carousel-item] .slide-wrapper .main-content .content [ui-slot=head] .description{
    display:-webkit-box;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:4;
  }
  [ui-section=slideshow] [ui-slot=carousel] [ui-slot=carousel-item] .slide-wrapper .main-content .content .actions{
    display:flex;
    align-items:center;
    gap:var(--spacing-16);
  }
  [ui-section=slideshow] [ui-slot=carousel] [ui-slot=carousel-item] .slide-wrapper .main-content .content .actions [ui-slot=button][data-variant=primary]{
    --button-bg:var(--fg-color);
    --button-fg:var(--bg-color);
  }
  [ui-section=slideshow] [ui-slot=carousel] [ui-slot=carousel-item] .slide-wrapper .main-content .content .actions [ui-slot=button][data-variant=neutral]{
    --button-fg:var(--fg-color);
  }
  [ui-section=slideshow] [ui-slot=carousel] [ui-slot=carousel-item] .slide-wrapper .main-content .content .actions [ui-slot=button][data-variant=neutral] i{
    transition:transform var(--transition-bouncy-default-effects);
  }
  [dir="rtl"] [ui-section=slideshow] [ui-slot=carousel] [ui-slot=carousel-item] .slide-wrapper .main-content .content .actions [ui-slot=button][data-variant=neutral] i{
    rotate:-180deg;
  }
  [ui-section=slideshow] [ui-slot=carousel] [ui-slot=carousel-item] .slide-wrapper .main-content .content .actions [ui-slot=button][data-variant=neutral]:hover i{
    transform:translateX(var(--spacing-4));
  }
  [ui-section=slideshow] [ui-slot=carousel] [ui-slot=carousel-item] .slide-wrapper .main-content .content[data-y-alignment=start]{
    justify-content:flex-start;
  }
  [ui-section=slideshow] [ui-slot=carousel] [ui-slot=carousel-item] .slide-wrapper .main-content .content[data-y-alignment=center]{
    justify-content:center;
  }
  [ui-section=slideshow] [ui-slot=carousel] [ui-slot=carousel-item] .slide-wrapper .main-content .content[data-y-alignment=end]{
    justify-content:flex-end;
  }
  [ui-section=slideshow] [ui-slot=carousel] [ui-slot=carousel-item] .slide-wrapper .main-content .content[data-x-alignment=start]{
    align-items:flex-start;
  }
  [ui-section=slideshow] [ui-slot=carousel] [ui-slot=carousel-item] .slide-wrapper .main-content .content[data-x-alignment=start] [ui-slot=head]{
    align-items:flex-start;
  }
  [ui-section=slideshow] [ui-slot=carousel] [ui-slot=carousel-item] .slide-wrapper .main-content .content[data-x-alignment=start] [ui-slot=head] > *{
    text-align:start;
  }
  [ui-section=slideshow] [ui-slot=carousel] [ui-slot=carousel-item] .slide-wrapper .main-content .content[data-x-alignment=start] .actions{
    justify-content:flex-start;
  }
  [ui-section=slideshow] [ui-slot=carousel] [ui-slot=carousel-item] .slide-wrapper .main-content .content[data-x-alignment=center]{
    align-items:center;
  }
  [ui-section=slideshow] [ui-slot=carousel] [ui-slot=carousel-item] .slide-wrapper .main-content .content[data-x-alignment=center] [ui-slot=head]{
    align-items:center;
  }
  [ui-section=slideshow] [ui-slot=carousel] [ui-slot=carousel-item] .slide-wrapper .main-content .content[data-x-alignment=center] [ui-slot=head] > *{
    text-align:center;
  }
  [ui-section=slideshow] [ui-slot=carousel] [ui-slot=carousel-item] .slide-wrapper .main-content .content[data-x-alignment=center] .actions{
    justify-content:center;
  }
  [ui-section=slideshow] [ui-slot=carousel] [ui-slot=carousel-item] .slide-wrapper .main-content .content[data-x-alignment=end]{
    align-items:flex-end;
  }
  [ui-section=slideshow] [ui-slot=carousel] [ui-slot=carousel-item] .slide-wrapper .main-content .content[data-x-alignment=end] [ui-slot=head]{
    align-items:flex-end;
  }
  [ui-section=slideshow] [ui-slot=carousel] [ui-slot=carousel-item] .slide-wrapper .main-content .content[data-x-alignment=end] [ui-slot=head] > *{
    text-align:end;
  }
  [ui-section=slideshow] [ui-slot=carousel] [ui-slot=carousel-item] .slide-wrapper .main-content .content[data-x-alignment=end] .actions{
    justify-content:flex-end;
  }
  [ui-section=slideshow] .controls{
    --controls-fg-color:oklch(from var(--bg-color) clamp(0, (0.6 - l) * 99999, 1) 0 0deg);
    display:flex;
    justify-content:space-between;
    height:48px;
    gap:var(--spacing-24);
  }
  [ui-section=slideshow] .controls:not([data-show-arrows]), [ui-section=slideshow] .controls[data-centered-arrows]{
    justify-content:center;
  }
  [ui-section=slideshow] .controls [ui-slot=button][data-variant=neutral]{
    --button-fg:var(--controls-fg-color);
  }
  @media (max-width: 1024px){
    [ui-section=slideshow] .controls{
      padding-inline:var(--spacing-16);
    }
  }
  [ui-section=slideshow] .controls .pagination{
    display:flex;
    gap:var(--spacing-8);
    position:relative;
    align-items:center;
    justify-content:center;
    width:-moz-fit-content;
    width:fit-content;
  }
  [ui-section=slideshow] .controls .pagination [ui-carousel=marker]{
    display:flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    transition:var(--transition-standard-default-spatial);
    border:none;
    background-color:transparent;
    color:var(--controls-fg-color);
    cursor:pointer;
  }
  [ui-section=slideshow] .controls .pagination [ui-carousel=marker]::before{
    content:"";
    display:flex;
    width:20px;
    height:4px;
    transition:var(--transition-standard-default-spatial);
    border-radius:var(--radius-rounded);
    background-color:color-mix(in srgb, currentcolor 38%, transparent);
  }
  [ui-section=slideshow] .controls .pagination [ui-carousel=marker][aria-selected=true]::before{
    width:inherit;
    background-color:currentcolor;
  }
}
