@layer sections{
  [ui-section=reviews]{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:var(--spacing-32);
  }
  [ui-section=reviews] .items{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    width:100%;
    grid-gap:var(--spacing-24);
    gap:var(--spacing-24);
  }
  [ui-section=reviews] .items [ui-block=review],
  [ui-section=reviews] .items .skeleton-item{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    overflow:hidden;
    border-radius:var(--radius-review);
  }
  [ui-section=reviews] .items [ui-block=review] .media,
  [ui-section=reviews] .items .skeleton-item .media{
    height:100%;
    aspect-ratio:1/1;
  }
  [ui-section=reviews] .items [ui-block=review] .media > img,
  [ui-section=reviews] .items .skeleton-item .media > img{
    -o-object-fit:cover;
       object-fit:cover;
  }
  [ui-section=reviews] .items [ui-block=review] .content,
  [ui-section=reviews] .items .skeleton-item .content{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:var(--spacing-24);
    gap:var(--spacing-16);
  }
  [ui-section=reviews] .items [ui-block=review] .content .core,
  [ui-section=reviews] .items .skeleton-item .content .core{
    display:flex;
    flex-direction:column;
    gap:var(--spacing-16);
  }
  [ui-section=reviews] .items [ui-block=review] .content .core article,
  [ui-section=reviews] .items .skeleton-item .content .core article{
    display:-webkit-box;
    overflow:hidden;
    color:var(--color-on-surface-variant);
    word-break:break-all;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:8;
    line-clamp:8;
  }
  [ui-section=reviews] .items [ui-block=review] .content .core .images,
  [ui-section=reviews] .items .skeleton-item .content .core .images{
    display:flex;
    flex-wrap:wrap;
    gap:var(--spacing-8);
  }
  [ui-section=reviews] .items [ui-block=review] .content .core .images .image,
  [ui-section=reviews] .items .skeleton-item .content .core .images .image{
    width:var(--spacing-48);
    height:var(--spacing-48);
    overflow:hidden;
    border-radius:calc(var(--radius-testimonial) * 0.6);
  }
  [ui-section=reviews] .items [ui-block=review] .content .core .images .image > img,
  [ui-section=reviews] .items .skeleton-item .content .core .images .image > img{
    -o-object-fit:cover;
       object-fit:cover;
  }
  [ui-section=reviews] .items [ui-block=review] .content .author,
  [ui-section=reviews] .items .skeleton-item .content .author{
    padding-top:var(--spacing-16);
    border-top:1px solid var(--color-surface-variant);
  }
  [ui-section=reviews] .items [ui-block=review][ui-block=review] .content,
  [ui-section=reviews] .items .skeleton-item[ui-block=review] .content{
    background-color:var(--color-surface-container-low);
  }
  [ui-section=reviews] [ui-slot=head]{
    width:100%;
  }
  [ui-section=reviews] [ui-slot=head] .overview{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:var(--spacing-16);
    margin-top:var(--spacing-16);
  }
  [ui-section=reviews] [ui-slot=head] .overview .rating .total{
    font:var(--font-display-md);
  }
  [ui-section=reviews] [ui-slot=head] .overview .rating .stars{
    display:grid;
    grid-gap:var(--spacing-4);
    gap:var(--spacing-4);
  }
  [ui-section=reviews] [ui-slot=head] .overview .states{
    display:flex;
    flex-direction:column-reverse;
    gap:var(--spacing-8);
    width:380px;
  }
  [ui-section=reviews] [ui-slot=head] .overview .states .state{
    display:flex;
    align-items:center;
    gap:var(--spacing-8);
  }
  [ui-section=reviews] [ui-slot=head] .overview .states .state svg{
    color:#f6b51e;
  }
  [ui-section=reviews] [ui-slot=head] .overview .states .state span{
    width:10px;
  }
  [ui-section=reviews] [ui-slot=head] .overview .states .state progress{
    width:100%;
  }
  [ui-section=reviews] [ui-slot=head] .overview .add-review-modal [ui-slot=modal-body]{
    display:grid;
    grid-gap:var(--spacing-16);
    gap:var(--spacing-16);
  }
  [ui-section=reviews] [ui-slot=head] .overview .add-review-modal [ui-slot=modal-body] .field{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:var(--spacing-8);
  }
  [ui-section=reviews] [ui-slot=head] .overview .add-review-modal [ui-slot=modal-body] .field [ui-slot=input],
  [ui-section=reviews] [ui-slot=head] .overview .add-review-modal [ui-slot=modal-body] .field [ui-slot=textarea]{
    width:100%;
  }
  [ui-section=reviews] [ui-slot=head] .overview .add-review-modal [ui-slot=modal-body] .fields{
    display:grid;
    grid-gap:var(--spacing-16);
    gap:var(--spacing-16);
    grid-template-columns:repeat(2, 1fr);
  }
  [ui-section=reviews] [ui-slot=head] .overview .add-review-modal [ui-slot=modal-body] .fields .field:last-child, [ui-section=reviews] [ui-slot=head] .overview .add-review-modal [ui-slot=modal-body] .fields .field:nth-last-child(2), [ui-section=reviews] [ui-slot=head] .overview .add-review-modal [ui-slot=modal-body] .fields .field:nth-last-child(3){
    grid-column:1/3;
  }
  [ui-section=reviews] [ui-slot=head] .overview .add-review-modal [ui-slot=modal-body] .fields .field .images{
    display:flex;
    flex-wrap:wrap;
    gap:var(--spacing-8);
  }
  [ui-section=reviews] [ui-slot=head] .overview .add-review-modal [ui-slot=modal-body] .fields .field .images .upload{
    position:relative;
    width:60px;
    height:60px !important;
  }
  [ui-section=reviews] [ui-slot=head] .overview .add-review-modal [ui-slot=modal-body] .fields .field .images .upload > input[type=file]{
    position:absolute;
    border-radius:var(--radius-sm);
    opacity:0;
    scale:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
  }
  [ui-section=reviews] [ui-slot=head] .overview .add-review-modal [ui-slot=modal-body] .fields .field .images .image{
    position:relative;
    height:60px;
  }
  [ui-section=reviews] [ui-slot=head] .overview .add-review-modal [ui-slot=modal-body] .fields .field .images .image > img{
    border-radius:var(--radius-button);
    -o-object-fit:cover;
       object-fit:cover;
    box-shadow:var(--shadow-lg);
  }
  [ui-section=reviews] [ui-slot=head] .overview .add-review-modal [ui-slot=modal-body] .fields .field .images .image > button{
    position:absolute;
    z-index:2;
    right:calc(var(--spacing-4) * -1);
    top:calc(var(--spacing-4) * -1);
    background-color:color-mix(in srgb, currentcolor 15%, transparent) !important;
  }
  @media (max-width: 1280px){
    [ui-section=reviews] .items{
      grid-template-columns:1fr;
    }
  }
  @media (max-width: 769px){
    [ui-section=reviews] [ui-slot=head] .overview{
      width:100%;
    }
    [ui-section=reviews] [ui-slot=head] .overview .states{
      width:100%;
    }
    [ui-section=reviews] [ui-slot=head] .overview .add-review-modal [ui-slot=modal-body] .fields{
      display:flex;
      flex-direction:column;
    }
    [ui-section=reviews] .items .skeleton-item,
    [ui-section=reviews] .items [ui-block=review]{
      display:flex;
      flex-direction:column-reverse;
    }
  }
}