@layer sections{
  [ui-section=faqs]{
    gap:var(--spacing-32);
  }
  [ui-section=faqs] .faqs-card{
    display:flex;
    flex-direction:column;
    padding:var(--spacing-40);
    border-radius:var(--radius-card);
    background-color:var(--inner-bg-color);
    color:var(--fg-color);
    gap:var(--spacing-48);
  }
  [ui-section=faqs] .faqs-card .content{
    display:flex;
    gap:var(--spacing-40);
    flex-wrap:wrap;
  }
  [ui-section=faqs] .faqs-card .content .media{
    width:400px;
    overflow:hidden;
    border-radius:calc(var(--radius-card) / 2);
    background-color:oklch(from var(--inner-bg-color) calc(l - 0.0225) c h);
  }
  [ui-section=faqs] .faqs-card .content .media[data-image-ratio=square]{
    aspect-ratio:1/1;
  }
  [ui-section=faqs] .faqs-card .content .media[data-image-ratio=portrait]{
    aspect-ratio:3/4;
  }
  [ui-section=faqs] .faqs-card .content .media[data-image-ratio=landscape]{
    aspect-ratio:4/3;
  }
  [ui-section=faqs] .faqs-card .content .media > img{
    -o-object-fit:cover;
       object-fit:cover;
  }
  [ui-section=faqs] .faqs-card .content .media[data-image-placement=first]{
    order:-1;
  }
  [ui-section=faqs] .faqs-card .content .media[data-image-placement=second]{
    order:1;
  }
  [ui-section=faqs] .faqs-card .content .items-area{
    flex:1;
  }
  @media (max-width: 1024px){
    [ui-section=faqs] .faqs-card{
      gap:var(--spacing-24);
    }
    [ui-section=faqs] .faqs-card .content{
      flex-direction:column;
      gap:var(--spacing-24);
    }
    [ui-section=faqs] .faqs-card .content .media{
      width:100%;
    }
  }
  @media (max-width: 1024px){
    [ui-section=faqs] .faqs-card{
      padding:var(--spacing-24);
    }
    [ui-section=faqs] .faqs-card .content .media{
      aspect-ratio:4/3 !important;
    }
  }
}