/* =========================
   RESET
========================= */

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


body {

    background-color: white;

    overflow-x:hidden;

}



/* =========================
   MENU
========================= */

nav {

    background-color: rgb(5,102,212);

    padding:15px 20px;

    display:flex;

    justify-content:center;

}



ul {

    list-style:none;

    display:flex;

    gap:40px;

    flex-wrap:wrap;

    justify-content:center;

}



li {

    color:black;

    font-family:Georgia,'Times New Roman',serif;

    font-size:18px;

    cursor:pointer;

    position:relative;

    transition:.3s;

}



li::after {

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0%;

    height:2px;

    background-color:yellow;

    transition:.3s;

}



li:hover {

    color:yellow;

}



li:hover::after {

    width:100%;

}



a {

    text-decoration:none;

    color:inherit;

}




/* =========================
   TITULO
========================= */

h1 {

    text-align:center;

    font-family:'Times New Roman',serif;

    margin:20px 0;

}




/* =========================
   CONTAINER PRINCIPAL
========================= */


.container {

    background-color:rgb(245,255,155);

    display:flex;

    flex-direction:column;

    gap:30px;

    padding:40px 5%;

}




/* =========================
   NOTÍCIAS
========================= */


.noticia {


    display:grid;


    grid-template-columns:

    minmax(300px,1fr)

    minmax(300px,1fr);



    align-items:center;


    gap:40px;


    padding:50px 8%;


    background-color:rgb(253,255,154);



}





/*
    Alternância das notícias
*/


.esquerda {

    grid-template-areas:

    "texto galeria";

}



.direita {

    grid-template-areas:

    "galeria texto";

}





.texto {


    grid-area:texto;


    width:100%;

    padding:20px;


}




.texto h3 {


    font-size:clamp(22px,3vw,32px);


    margin-bottom:20px;


    font-family:

    Verdana,

    Geneva,

    Tahoma,

    sans-serif;


}





.texto p {


    font-size:clamp(16px,2vw,20px);


    line-height:1.7;


    word-wrap:break-word;


}





/* =========================
   GALERIA
========================= */


.galeria-container {


    grid-area:galeria;


    width:100%;


    display:flex;


    justify-content:center;


    align-items:center;


}




.galeria-fotos {


    width:100%;


    display:grid;


    grid-template-columns:

    repeat(auto-fit,minmax(160px,1fr));


    gap:15px;


}





.galeria-fotos img {


    width:100%;


    height:220px;


    object-fit:cover;


    border-radius:15px;


    transition:.3s;


}




.galeria-fotos img:hover {


    transform:scale(1.04);


}





/*
    Quando tem somente uma foto
*/


.galeria-fotos img:only-child {


    height:auto;


    max-height:600px;


}




/*
    Primeira foto ganha destaque
    quando existe uma galeria
*/


.galeria-fotos img:first-child {


    grid-column:span 2;


}





/* =========================
   SEM FOTO
========================= */


.sem-foto {


    width:100%;


    height:250px;


    background-color:rgb(236,229,123);


    border-radius:15px;


    display:flex;


    align-items:center;


    justify-content:center;


    font-family:Georgia,serif;


}




/* =========================
   TABLET
========================= */


@media(max-width:900px){



    .noticia {


        grid-template-columns:1fr;


        padding:35px 5%;


    }



    .esquerda,
    .direita {


        grid-template-areas:


        "texto"


        "galeria";


    }




    .galeria-fotos {


        grid-template-columns:

        repeat(auto-fit,minmax(140px,1fr));


    }





    .galeria-fotos img:first-child {


        grid-column:span 1;


    }



}





/* =========================
   CELULAR
========================= */


@media(max-width:600px){



    ul {


        gap:20px;


    }



    li {


        font-size:16px;


    }



    .container {


        padding:20px 10px;


    }




    .noticia {


        padding:20px;


    }




    .texto {


        padding:10px;


    }




    .texto p {


        font-size:15px;


    }




    .galeria-fotos {


        grid-template-columns:1fr;


    }





    .galeria-fotos img {


        height:auto;


        max-height:350px;


    }



}