/* CSS Atual */
.slider-container {
  width: 100vw;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 
.slider {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  justify-content: space-around;
  background-color: yellow;

} */

.slider-track {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: center;
  width: 100vw;

  margin: 0;
  padding: 0;
  transition: transform 0.4s ease-in-out;
}

.slider-track img {
  width: 250px;
  height: 250px;
  object-fit: cover;
  padding: 20px 20px;
  aspect-ratio: 9 / 16;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Wrapper para hover */
.slider-track img::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  background-color: rgb(208, 30, 30); /* Invisível por padrão */
  transition: background-color 0.3s ease;
}

/* Efeito hover */
.slider-track img:hover {
  transform: scale(1.1); /* Zoom mais suave */
}

.slider-track img:hover::after {
  background-color: rgba(0, 0, 0, 0.2); /* Overlay leve */
}

/* Botões */
/* .slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  border-radius: 50%;
  z-index: 1;
}

.prev-btn {
  left: 10px;
}

.next-btn {
  right: 10px;
} */

/* Responsividade */
@media (max-width: 760px) {
  /* Celulares */

  .slider-container {
    display: flex;
    height: 100vh;
  
  }
  .slider-track {

    display: flex;
    flex-direction: column;

  }

  .slider-track img {
      width: 175px;
      height: 175px;
      padding: 10px;

  }

}

@media (min-width: 769px) and (max-width: 1250px) {
  /* Tablets */

  .slider-container {
    width: 100vw;
    height: auto;
  }

  .slider-track  {
    width: 100vw;
    height: auto;
    margin: 100px;
    gap: 20px;
  }
  .slider-track img {
      width: 180px !important;
      height: 180px !important;
      padding: 15px;
  }
}

@media (min-width: 1025px) {
  /* Telas grandes */
 
  .slider-container {
    width: 100vw;
    height: 50vh;
  }

  .slider-track  {
    width: 100vw;
    height: 60vh;
  }
  .slider-track img {
      width: 250px;
      height: 250px;
      padding: 20px;
  }
}



/* insta feed  */

.pdd-text {
  padding: 10px 0 20px 0 !important;
}
.btn-text-color {
  color: azure;
} 

/* Container principal */
.blog-container {
  display: flex;
  flex-wrap: wrap; /* Permite quebra de linha para os itens */
  justify-content: center; /* Centraliza os itens horizontalmente */
  align-items: center; /* Centraliza os itens verticalmente */
  padding: 10px 10px; /* Espaçamento interno para o container */
  box-sizing: border-box;
  width: 100%; /* Garante que o container ocupe toda a largura da tela */
  max-width: 1200px; /* Limita o tamanho máximo do container */
  margin: 0 auto; /* Garante que o container fique centralizado na tela */
}

/* Cada card de iframe */
.insta-feed-container {
  display: flex; /* Flexbox para os itens dentro de cada card */
  justify-content: center; /* Centraliza o conteúdo horizontalmente */
  align-items: center; /* Centraliza o conteúdo verticalmente */
  flex: 0 1 25%; /* Tamanho inicial dos itens (25% da largura) */
  max-width: 300px; /* Limita o tamanho máximo de cada item */
  margin-bottom: 16px; /* Espaçamento entre os itens */
}

/* Ajuste do iframe */
.insta-frame {
  width: 100%; /* Ocupa 100% da largura do contêiner */
  height: 380px; /* Altura fixa */
  border: none; /* Remove bordas padrão */
}

/* Responsividade para telas médias (até 820px) */
@media (max-width: 820px) {
  #blog-container {
    justify-content: center; /* Centraliza os itens horizontalmente em telas menores */
  }

  .insta-feed-container {
    flex: 0 1 45%; /* Em tablets, cada item ocupa 45% da largura */
  }
}

/* Responsividade para telas pequenas (até 480px) */
@media (max-width: 480px) {
  #blog-container {
    justify-content: center; /* Centraliza os itens horizontalmente em telas menores */
  }

  .insta-feed-container {
    flex: 0 1 100%; /* Em celulares, cada item ocupa 100% da largura */
  }
}