/* ==========================================================================
    CAROUSEL I
========================================================================== */
     
     #myCarousel {
        --f-arrow-pos: 10px;
        --f-arrow-bg: rgba(255, 255, 255, 0.3);
        --f-arrow-hover-bg: rgba(255, 255, 255, 0.754);
        --f-arrow-color: #333;
        --f-arrow-width: 40px;
        --f-arrow-height: 40px;
        --f-arrow-svg-width: 20px;
        --f-arrow-svg-height: 20px;
        --f-arrow-svg-stroke-width: 2px;
        --f-arrow-border-radius: 50%;

        height: 400px;
       
      }

      #myCarousel .f-carousel__slide {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      #myCarousel img {
        max-width: 100%;
        max-height: 100%;
        height: auto;
        object-fit: contain;
      }


/* ==========================================================================
    CAROUSEL II
========================================================================== */

/* external css: flickity.css */

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* 1. AUMENTANDO O TAMANHO DA GALERIA INTEIRA */
.gallery {
  background: #000000;
  width: 100%;
  height: 500px; /* Aumentado de 400px para 600px (mude para o tamanho que desejar) */ 
  
   
}

/* 2. AJUSTANDO OS SLIDES DENTRO DA GALERIA */
.gallery-cell {
  width: 66%;
  height: 500px; /* Altura do slide (menor que a galeria para notar o alinhamento no meio) */
  margin-right: 10px;
  background: rgb(136, 173, 204);  
  counter-increment: gallery-cell;
  position: relative; 

}

/* 3. AS FOTOS ADAPTÁVEIS E NO MEIO */
.gallery-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  object-position: center; /* Mantém o foco da foto exatamente no meio */
}

/* 4. NÚMERO POR CIMA DA FOTO 

.gallery-cell:before {
  position: absolute;
  z-index: 1; 
  display: block;
  text-align: center;
  content: counter(gallery-cell);
  font-size: 80px;
  color: white;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
*/