/*RESPONSIVIDADE PAGE ATORES*/

/*RESPONSIVIDADE  telas até 1115px*/

@media screen and (max-width: 1115px) {
    /*Header dos atores*/
    .header_atores {
        /*background-image: url(../imagens/luzes.jpg);*/
        background-image: url(../imagens/stage-light-with-red-background2.jpg);
    }

    /*Section dos atores*/
    .section_atores {
        display: grid;
        grid-template-columns: repeat(4, 1fr);;
        grid-template-rows: repeat(4, 1fr);
        justify-content: center;
        align-items: center;
        
        gap: 0.5rem;

        width: 100%;

        /*margin: 1rem 1rem;*/
        /*margin-left: 1rem;*/
        /*margin-right: 1rem;*/
        /*justify-content: space-between;*/
    

    }

    /*Parágrafo pra aparecer o nome do ator com JS*/
    .click_nome {
        font-size: 1.2rem;
        color: var(--cor_amarelo_claro);
        text-align: center;
        justify-content: space-between;
        margin-left: -1rem;
        margin-right: -1rem;
    
    }
    

}


@media screen and (max-width: 845px) {

    /*Header dos atores*/
    .header_atores {
        /*background-image: url(../imagens/luzes.jpg);*/
        background-image: url(../imagens/stage-light-with-red-background.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 260px;
        width: 100%;
        margin: 0;
        border-radius: 5px;
    
    
    }
    
    /*Título: Atores*/
    .atores_título{
        color: yellow;
        /*color: var(--cor_amarelo_claro);*/
        font-size: 2.7rem;
        margin-top: 3rem;
        margin-bottom: 0;
    
    }

    /*Section dos atores*/
    .section_atores {
        display: grid;
        display: block;
        justify-content: center;
        align-items: center;
        
        gap: 0.5rem;

        width: 100%;
        margin: 1rem auto;
        /*margin-left: 1rem;*/
        /*margin-right: 1rem;*/
        justify-content: space-between;
    

    }

    /*Classe geral pra figure*/
    .figure_atores {
        text-align: center;

    }

    /*Classe pra img da page atores*/
    .img_ator {
        width: 12.5rem;
        height: 15.62rem;
        border: 1px solid var(--cor_amarelo_claro);
        border-radius: 25px;
        cursor: pointer;

        /*object-fit é pra especificar como um <img> ou <video> deve ser redimensionado para caber em seu contêiner*/
       /*Essa propriedade informa ao conteúdo pra preencher o contêiner de diversas maneira; como "preservar essa proporção" ou "esticar e ocupar o máximo de espaço possível*/
       object-fit: cover;

    }

    .img_ator:hover {
        transform: none;
    
    }



}

































/*Esse trabalho foi feito por Luciene Lima*/