/* ------------------------------------------------------------- */
/* CARDS ------------------------------------------------------- */
/* ------------------------------------------------------------- */
.workshop_cards{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1%;
}

.workshop_card{
    background-color:var(--verde-claro-transparente-01) ;
    border-radius: 25px;
    padding-inline: 10px;
    margin-block: 10px;
    cursor: pointer;
    display: flex;
    gap: 2%;
}

/* IMAGEM */
.image_container{
    display: flex;
    height: 100%;
    width: auto;
    align-content: center;
    border-right: 2px solid var(--verde-claro-transparente);
}

.image_container img{
    width: 150px;
    height: 200px;
    padding-right: 10px;
    object-fit: contain;
    align-self: center;
}


/* TEXTOS */
.text_oficinas_card{
    padding-block: 15px;
    max-height: 350px;
    align-content: center;
    overflow: auto;
}

.workshop_card h2{
    font-size: 1.2rem;
    font-weight: 700;
    color: #333;
    text-align: justify;
    letter-spacing: 0px;
}

.workshop_card h3,
.workshop_card p{
    font-size: 1.2rem;
    font-weight: 450;
    color: #333;
    text-align: justify;
    letter-spacing: 0px;
}

/* PAGINAÇÃO */
.pagination{
    justify-content: center;
    gap: 20px;
    align-items: center;
}

.pagination button{
    padding: 5px;
    border-radius: 10px;
}

@media(max-width: 1200px) {

}
@media(max-width: 999px) {
    .workshop_cards{
        grid-template-columns: repeat(1, 1fr);
    }
}
@media (max-height: 768px), (max-width: 768px){
    .image_container img{
        width: 120px;
        height: 160px;
    }
}
@media(max-width: 400px){
    .image_container img{
        width: 90px;
        height: 120px;
    }
}

/* ------------------------------------------------------------- */
/* DIALOG ------------------------------------------------------ */
/* ------------------------------------------------------------- */

#dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.6);
}

#dialog {
    position:fixed;
    max-width: 50%;
    min-width: 25%;
    max-height: 80%;
    min-height: 40%;
    border: none;
    border-radius: 20px;
    align-self: center;
    justify-self: center;
}

/* CONTAINER */
#container_dialog{
    gap: 200px;
    padding: 20px;
}

/* IMAGEM */
.image_dialog{
    display: flex;
    height: 250px;
    width: 100%;
    justify-content: center;
    background-color: rgba(128, 128, 128, 0.1);
}

#container_dialog img{
    width: auto;
    height: 100%;
}

/* TEXT */
#text_content{
    text-align: center;
    max-height: 400px;
    overflow: auto;
}
#text_content h2{
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    text-align: justify;
    letter-spacing: 0px;
}

#text_content p{
    font-size: 1rem;
    font-weight: 450;
    color: #333;
    text-align: justify;
    letter-spacing: 0px;
}

/* BOTÃO */
.botao_dialog{
    display: flex;
    width: 100%;
    max-height: 75px;
    justify-content: center;
    align-content: center;
}

.botao_dialog button{
    padding-inline: 10px;
    border-radius: 10px;
    font-size: 1.4rem;
}

@media(max-width: 1200px) {
    #dialog {
        max-width: 70%;
    }
}
@media(max-width: 999px) {
    #dialog {
        max-width: 80%;
        max-height: 90%;
    }
}
@media (max-width: 768px){
    #dialog {
        max-width: 90%;
    }
}