/* Configuração geral da seção */
.secao-shorts-youtube {
    padding: 60px 20px;
    background-color: #002633; /* Fundo cinza bem claro para destacar os vídeos */
    font-family: Arial, Helvetica, sans-serif;
}

.container-shorts {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.titulo-shorts {
    font-size: 2rem;
    color: #333333;
    margin-bottom: 40px;
    font-weight: bold;
}

/* Adicione esta variável no seu CSS. É aqui que você controla a altura! */
:root {
    --altura-video: 556px; /* Altere este valor (ex: 400px, 550px, 600px) para mudar a altura */
}

/* O sistema flex se adapta melhor quando definimos a altura fixa dos itens */
.grid-shorts {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}

/* Novo formato mais moderno e fácil de controlar */
.container-video-vertical {
    position: relative;
    height: var(--altura-video); /* Puxa a altura que você definiu lá em cima */
    max-height: 85vh; /* Regra de segurança: impede que o vídeo fique maior que a tela do celular do visitante */
    aspect-ratio: 9 / 16; /* Trava magicamente a largura para acompanhar a altura no formato Short */
    border-radius: 16px; 
    overflow: hidden;
    background-color: #000000;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); 
    transition: transform 0.3s ease; 
}

.container-video-vertical:hover {
    transform: translateY(-5px);
}

.container-video-vertical iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}