.atividades-stack {
  position: relative;
}

/* cada card do stack */
.atividade-card {
  position: relative;
  transform-origin: center center;
  will-change: transform, opacity;
  transition: transform 0.2s linear, opacity 0.2s linear;
}

/* leve overlap entre cards */
.atividade-card+.atividade-card {
  margin-top: -64px;
}

.atividade-card:first-child {
  margin-top: 0;
}

body {
  background-color: #ffffff !important;
}

/* --- CSS PARA O SHORTCODE DA GALERIA (LAYOUT FIGMA) --- */

.casa-sao-roque-gallery-grid {
  display: grid;
  /* Define 4 colunas como base para o grid. 
       A soma das colunas ocupadas pelos itens de 0 a 3 é 4 (2+2, ou 1+1+1+1). */
  grid-template-columns: repeat(4, 1fr);
  /* Altura automática: As linhas se ajustarão ao conteúdo, 
       mas vamos forçar uma altura mínima para blocos menores (1fr). */
  grid-auto-rows: minmax(150px, auto);
  /* Altura mínima para cada linha da grade */
  gap: 15px;
  /* Espaçamento entre os itens (Gutter) */
  width: 100%;
  margin: 0 auto;
}

.casa-sao-roque-gallery-item {
  overflow: hidden;
  /* Garante que o container ocupe o espaço exato do grid */
  min-height: 0;
  border-radius: 8px;
  /* Adicionando um leve arredondamento nas bordas */
}

.casa-sao-roque-gallery-item img {
  width: 100%;
  max-height: 310px;
  object-fit: cover;
  /* Recorta a imagem para preencher o container */
  display: block;
}

/* --- REGRAS DO GRID (Atenção ao padrão que se repete a cada 9 blocos) --- */

/* Bloco 0: GRANDE (Ocupa 2 colunas e 2 linhas) */
.casa-sao-roque-gallery-item.item-0 {
  grid-column: span 1;
  grid-row: span 1;
}

/* Bloco 1: MÉDIO HORIZONTAL (Ocupa 2 colunas e 1 linha) */
.casa-sao-roque-gallery-item.item-1 {
  grid-column: span 2;
  grid-row: span 1;
}

/* Bloco 2: PEQUENO (Ocupa 1 coluna e 1 linha) */
.casa-sao-roque-gallery-item.item-2 {
  grid-column: span 1;
  grid-row: span 1;
}

/* Bloco 3: PEQUENO (Ocupa 1 coluna e 1 linha) */
.casa-sao-roque-gallery-item.item-3 {
  grid-column: span 1;
  grid-row: span 1;
  height: 146px;
}

/* Bloco 4: PEQUENO (Ocupa 1 coluna e 1 linha) */
.casa-sao-roque-gallery-item.item-4 {
  grid-column: span 1;
  grid-row: span 1;
  height: 146px;
}

/* Bloco 5: MÉDIO VERTICAL (Ocupa 1 coluna e 2 linhas) */
.casa-sao-roque-gallery-item.item-5 {
  grid-column: span 2;
  grid-row: span 2;
}

/* Bloco 6: GRANDE HORIZONTAL (Ocupa 3 colunas e 1 linha) */
.casa-sao-roque-gallery-item.item-6 {
  grid-column: span 1;
  grid-row: span 1;
  height: 146px;
}

/* Bloco 7: PEQUENO (Ocupa 1 coluna e 1 linha) */
.casa-sao-roque-gallery-item.item-7 {
  grid-column: span 1;
  grid-row: span 1;
  height: 146px;
}

/* Bloco 8: GRANDE VERTICAL (Ocupa 2 colunas e 2 linhas) */
.casa-sao-roque-gallery-item.item-8 {
  grid-column: span 2;
  grid-row: span 1;
}
.casa-sao-roque-gallery-item.item-9 {
  grid-column: span 1;
  grid-row: span 1;
}
.casa-sao-roque-gallery-item.item-10 {
  grid-column: span 1;
  grid-row: span 1;
}

.elementor-image-carousel-wrapper img {
    border-radius: 16px !important;
}

@media screen and (max-width:968px){
  .casa-sao-roque-gallery-item img{
    height: 310px !important;
  }
  .casa-sao-roque-gallery-item{
    grid-column: span 2 !important;
    grid-row: span 1 !important;
    height: 310px !important;
  }
}