* {
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
}

#galery-geral {
    z-index: 1000 !important;
}


/* Estilo geral para o container */

#container {
    max-width: 100%;
    /* Max width para evitar overflow */
    margin: auto;
    /* Centraliza o container */
    padding: 20px;
    /* Adiciona um pouco de espaço interno */
    box-sizing: border-box;
    /* Inclui padding e border na largura total */
}


/* Media query para telas pequenas (celulares) */

@media (max-width: 600px) {
    #container {
        margin-bottom: -400px !important;
        margin-top: -200px !important;
        /* Margens menores em telas pequenas */
        padding: 10px;
        /* Menos padding */
    }
}


/* Media query para tablets */

@media (min-width: 601px) and (max-width: 900px) {
    #container {
        margin-bottom: -400px !important;
        margin-top: -100px !important;
        /* Margens adequadas para tablets */
        padding: 15px;
        /* Padding adequado para tablets */
    }
}


/* Media query para telas grandes (desktops) */

@media (min-width: 901px) {
    #container {
        margin-bottom: -400px !important;
        /* Margem negativa conforme o original */
        padding: 20px;
        /* Padding para desktops */
    }
}

.image-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 400px 0 500px 0;
    align-items: center;
}

.image-gallery img {
    max-width: 400px;
    object-fit: cover;
    min-height: 400px;
    max-height: 400px;
    min-width: 400px;
    padding: 0.5rem;
}

.video-wrapper {
    flex: 0 0 calc(33.33% - 1rem); /* Mesma largura para imagens e vídeos */
    max-width: calc(33.33% - 1rem); /* Limita largura */
    margin: 0;
}

.video-wrapper {
    position: relative;
    padding-top: 56.25%; /* Proporção 16:9 */
    overflow: hidden;
}

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

@media (max-width: 600px) {
    .video-wrapper {
        flex: 0 0 calc(50% - 1rem); /* 2 itens por linha */
        max-width: calc(50% - 1rem);
    }
}

@media (min-width: 601px) and (max-width: 900px) {
    .video-wrapper {
        flex: 0 0 calc(33.33% - 1rem); /* 3 itens por linha */
        max-width: calc(33.33% - 1rem);
    }
}

@media (min-width: 901px) {
    .video-wrapper {
        flex: 0 0 calc(25% - 1rem); /* 4 itens por linha */
        max-width: calc(25% - 1rem);
    }
}