.gallery-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.gallery-thumb {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}
.gallery-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;                       
    background: rgba(0,0,0,0.65); 
    color: #fff;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    line-height: 1.3;
    text-align: center;
    opacity: 0;
    transform: translateY(100%);     
    transition: opacity 0.25s ease,
    transform 0.25s ease;
}

.gallery-item:hover .gallery-caption,
.gallery-item:focus-within .gallery-caption {
    opacity: 1;
    transform: translateY(0);
}

/* Contêiner que agrupa imagem + legendas */
.gallery-item {
    display: inline-flex;          
    flex-direction: column;       
    align-items: center;          
    margin: 0.5rem;
    position:relative; 
    overflow: hidden;
}

/* Garante que a imagem não quebre a largura do contêiner */
.gallery-item img {
    max-width: 100%;
    height: auto;
}

.gallery-item img.gallery-thumb {
    display: block;
    width: 100%;
    height: auto;
}

/* -----------------------------------------
   1️⃣ Wrapper que vira um flex container
   --------------------------------------- */
.portfolio-items-flex {
    display: flex;          
    flex-wrap: wrap;        
   gap: 1.5rem;                 
    margin-top: 1rem;            
}

/* -----------------------------------------
   2️⃣ Cada artigo ocupa um “bloco” de largura mínima
   ------------------------------------------------- */
.portfolio-item {
    margin-bottom: 0;            
   flex: 1 1 260px;             
    max-width: 100$px;            
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
   overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
}

/* efeito sutil ao passar o mouse – opcional */
.portfolio-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,.12);
}


.portfolio-item .thumb {
    display: block;
    margin-bottom: .5rem;
}
.portfolio-item .title {
    font-size: 1.2rem;
    text-align: center;
    padding: .5rem 1rem;
    margin: 0;
}

/* -----------------------------------------------
   4️⃣ Responsividade extra (telas menores)
   ------------------------------------------------- */
@media (max-width: 480px) {
    .portfolio-items-flex {
        justify-content: center;   /* centraliza os itens pequenos */
    }
    .portfolio-item {
        flex-basis: 200px;         /* diminui o tamanho mínimo em telas pequenas */
    }
}


.grid { display:flex; gap:2rem; flex-wrap:wrap; }
.col-left { flex:2 1 60%; height:739px; overflow-y:scroll;}
.col-right { flex:1 1 35%; }
@media(max-width:768px){ .grid{flex-direction:column;} .col-left {max-height: 498px;} }