body{
  &.post-type-archive-catalog{
    --data-list-columns: repeat(2, 1fr);
  }
}




/* home */
#home-vantagens {
  --data-list-columns: repeat(2, 1fr);
}

@media(width < 900px){
  #home-vantagens {
    --data-list-columns: 1fr;
  }
}

#home-solucoes{
  --data-list-columns: repeat(6, 1fr);
  --slide-item-width: var(--col-3);
  --slide-controls-align: end;
}

@media(width < 900px){
  #home-solucoes{
    --slide-item-width: var(--col-12);
  }
}

#home-lancamentos {
  --section-layout-background: var(--color-container);
  --section-layout-padding-block: var(--space-7x);
  --slide-item-width: var(--col-6);
}

@media(width < 900px){
  #home-lancamentos {
    --slide-item-width: var(--col-12);
  }
}

#home-acm {
  --data-list-columns: 1fr;
}

@media(width >= 901px){
  #home-acm {
    --section-header-position: var(--width-wrap-min);
    --section-content-position: var(--width-wrap-min);
    --data-list-columns: repeat(3, 1fr);
  }
}

#home-equipamentos {
  --slide-item-width: var(--col-12);
}

@media(width >= 901px){
  #home-equipamentos {
    --section-header-position: 4 / -4;
    --section-content-position: 5 / -5;
    --slide-item-width: var(--col-6);
  }
}

#home-clients {
  --slide-item-width: var(--col-2); 
}

@media(width < 900px){
  #home-clients {
    --slide-item-width: var(--col-6);
  }
}

#home-about{
  /* --section-header-position: wrap-start / 6;
  --section-content-position: 8 / wrap-end; */
  --section-layout-background: var(--color-container);
  --data-list-columns: repeat(2, 1fr);
  --section-layout-padding-block: var(--space-5x);
  --stack-gap: var(--space-half);
  --data-list-gap: var(--space-3x);

  .section-header {
    --title-font-size: var(--font-size-lg);
    --stack-gap: var(--space-2x);
  }

}


@media(width < 900px){
  #home-about{
    --data-list-columns: 1fr;
  }
}

/* Product */

#related-product {
  --section-layout-row-gap: var(--space-2x);
  background: linear-gradient(90deg, #324d7f 0%, #00d58e 100%);
}

/* Geral */
#about-intro, 
#about-timeline, 
#about-manifesto, 
#about-testimonial, 
#about-team, 
#contact-intro, 
#contact-map{
  .title {
    background-image:linear-gradient(to right, #355083, #02D590);
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* About */

#about-intro {
  --section-layout-padding-block: var(--space-3x);
  --section-layout-align: start;
  --title-font-size: var(--font-size-xl);
  --paragraph-font-size: 18px;
  --title-font-weight: 600;
}

@media(width >= 901px){
  #about-intro {
    --section-layout-padding-block: var(--space-10x);
    --section-header-position: wrap-start / 7;
    --title-font-size: var(--font-size-2xl);
  }
}

#about-number {
  --title-font-size: var(--font-size-lg);
  --section-layout-padding-block: var(--space-5x);
  background-image: var(--color-linear-inverse);
}

@media(width >= 901px){
  #about-number {
    --section-header-position: var(--width-wrap-min);
    --section-layout-padding-block: var(--space-10x);
  }
}

#about-timeline{
  --title-font-weight: bold;
  --title-line-height: 1;
  --stack-gap: var(--space-1x);
  --title-font-size: var(--font-size-xl);
  --slide-item-width: var(--col-12);
  .slide {
    background: no-repeat url(../assets/images/timeline.png) center center / contain;
  }
}

@media(width >= 901px){
  #about-timeline{
    --title-font-size: var(--font-size-3xl);
    --section-header-position: wrap-start / 5;
    --section-content-position: 6 / wrap-end;
    --slide-item-width: var(--col-3);
  }
}

#slide-timeline {
  background: no-repeat url(https://serilon.com.br/wp-content/uploads/2025/08/Arrow-2.png) center;
}


#about-testimonial {
  background-image: linear-gradient(180deg, #FFFFFF 50%, #F5F5F5 50%);
  --section-layout-align: start;
  --section-layout-padding-block: var(--space-3x);
  --title-font-size: var(--font-size-lg);
  --title-font-weight: bold;
  --stack-gap: var(--space-half);
  --slide-item-width: var(--col-12);
}

@media(width >= 901px){
  #about-testimonial {
    --section-header-position: wrap-start / 5;
    --section-content-position: 6 / wrap-end;
    --section-layout-padding-block: var(--space-7x);
    --slide-item-width: var(--col-4);
  }
}

#about-manifesto {
  --section-layout-align: start;
  --data-list-columns: 1fr;
  --data-list-gap: var(--space-3x);
  --title-font-size: var(--font-size-xl);
  --title-font-weight: bold;
}

@media(width >= 901px){
  #about-manifesto {
    --section-layout-padding-block: var(--space-7x);
    --title-font-size: var(--font-size-3xl);
    --paragraph-font-size: var(--font-size-md);
  }
}

.manifesto-item{
  background: var(--color-surface);
  padding: var(--space-2x);
  border-radius: var(--border-radius-lg);
  box-shadow: 3px 2px 9px 2px #8989894a
}

#about-team{
  --section-header-align: start;
  --title-font-size: var(--font-size-lg);
  --title-font-weight: bold;
  --slide-item-width: var(--col-6);
}

@media(width >= 901px){
  #about-team{
    --slide-item-width: var(--col-3);
  }
}

#about-vagas {
  --title-font-weight: bold;
}

#contact-intro{
  --section-layout-align: start;
  --title-font-size: var(--font-size-2xl);
  --section-layout-padding-block: 0;
}

#contact-map{
  --title-font-size: var(--font-size-lg);
}

.form-container{
  padding: var(--space-4x);
  background: var(--color-linear-inverse);
  border-radius: var(--border-radius-md);
  span{
    color: #fff;
  }
}

#faq{
  --title-font-size: var(--font-size-lg);
  --section-header-align: start;
}

/* Category */

.card-subcategory {
  --title-font-size: var(--font-size-sm);
  --button-width: 100%;
  img {
    aspect-ratio: 4 / 4;
    object-fit: cover;
    border-radius: var(--border-radius-lg);
  }

}

.card-subcategory-content {
  display: grid;
  gap: var(--space-2x);
  padding: var(--space-5x) var(--space-2x);
  text-align: center;
  grid-template-rows: auto 1fr auto;
}


#equipamento-intro {
  --section-layout-padding-block: var(--space-8x);
  --section-layout-background: var(--color-container);
  --title-font-size: var(--font-size-md);
  --title-line-height: 1.5;
  --title-font-weight: bold;
  --title-transform: uppercase;
  gap: var(--space-3x);
}

#equipamento-list {
  --data-list-columns: 1fr;
  --slide-item-width: var(--col-12);
}

@media(width >= 901px){
  #equipamento-list {
    .section-header{
      --section-header-position: 4 / -4;
    }
  }
}

.card-equipamento {
  display: grid;
  align-items: center;

  > img{
    max-width: 100%;
    margin: 0 auto;
  }
}

@media(width >= 901px){
  .card-equipamento {
    grid-template-columns: repeat(2, 1fr);
  }
}

.card-equipamento-content {
  display: grid;
  gap: var(--space-2x);
}