#section-blogs {
  padding: 10rem 1rem 5.625rem;
  text-align: center;

  & h2 {
    font-weight: 500;
    font-size: 2rem;
  }

  & .blogs_grid {
    display: grid;
    /* grid-template-columns: repeat(3, 1fr); */
    grid-template-columns: 1fr;
    gap: 1rem;
    /* row-gap: 3rem;
    columns: 1.5rem; */
    padding: 3rem 0 4.5rem;
  }

  & .blog_card {
    max-width: 410px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    border: 1px solid #dadada;
    color: var(--gray-200);
    text-align: start;

    & .card_image {
      background-color: #fff;

      & img {
        padding: 10px;
      }
    }

    & .card_content {
      display: flex;
      flex-direction: column;
      gap: 0.875rem;
      padding: 0 0.875rem 1.5rem;
    }

    & .blog_title {
      font-weight: bold;
      font-size: 1.5rem;
    }

    & .blog_content {
      font-weight: 500;
      font-size: 1.125rem;
    }
  }

  & .blogsSwiper {
    padding-top: 3.5rem;
    padding-bottom: calc(3.5rem + 1rem); /* padding + tamanho do bullet*/
  }

  & .swiper-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    bottom: 0;

    & .swiper-pagination-bullet {
      width: 1rem;
      height: 1rem;
      background: #d9d9d9;
      opacity: 1;
      margin: 0;
    }

    & .swiper-pagination-bullet-active {
      background: var(--green-100);
    }
  }

  & .blog_pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;

    & span {
      cursor: pointer;
    }

    & span.active {
      padding: 10px 34px;
      background-color: var(--green-300);
      color: #fff;
      transition: all 0.2s ease;

      &:hover {
        background-color: var(--green-100);
      }
    }
  }
}

.banner_blog {
    background-image: url("/wp-content/uploads/2025/11/bkg_blog.webp");
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--white-200);
    padding-block: 9.375rem;

    & h1 {
      max-width: 800px;
      margin: 0 auto;
      font-weight: bold;
      font-size: 2.375rem;
      line-height: 1.08;
    }
  }

  article {
    padding-top: 4rem;
    border-bottom: 1px solid #0000001a;

    & h2 {
      font-weight: 500;
      font-size: 2rem;
      color: var(--green-300);
      margin-bottom: 2rem;
    }

    & h3 {
      font-weight: 500;
      font-size: 1.5rem;
      color: var(--green-300);
      margin-bottom: 1rem;
    }

    & p {
      font-weight: 500;
      font-size: 1.125rem;
      line-height: 1.4;
      margin-bottom: 1rem;

      & img {
        display: block;
        margin-bottom: 1.5rem;
      }
    }

    & .btn_site {
      display: flex;
      justify-content: center;
      max-width: 20rem;
      margin: 2rem auto;
    }
  }

@media (min-width: 768px) {
  #section-blogs {
    & .blogs_grid {
      display: grid;
      /* grid-template-columns: repeat(3, 1fr); */
      grid-template-columns: 1fr 1fr;
      padding: 3rem 0 4.5rem;
    }

    & .blogs_title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0;
    }
  }
}

@media (min-width: 992px) {
  #section-blogs {
    padding-top: 4rem;
    & .blogs_grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
}

@media (min-width: 1400px) {
  #section-blogs {
    padding-inline: 6.25rem;
  }
}