/* ==========================================================
   FORCAEB.COM.BR
   GALERIA.CSS
   ARQUIVO DE GUERRA
========================================================== */


/* ==========================================================
   BANNER
========================================================== */


.gallery-banner{


    background:


    linear-gradient(

    rgba(0,0,0,.7),

    rgba(0,0,0,.9)

    ),


    url("../../img/backgrounds/hero.jpg");


    background-size:cover;


    background-position:center;


}




/* ==========================================================
   FILTROS
========================================================== */


.gallery-filter{


    display:flex;


    justify-content:center;


    gap:20px;


    padding:50px;


    background:#080808;


}



.gallery-filter button{


    padding:15px 35px;


    background:#111;


    color:white;


    border:


    1px solid var(--gold);


    cursor:pointer;


    font-family:'Oswald',sans-serif;


    letter-spacing:3px;


    transition:.3s;


}



.gallery-filter button:hover,

.gallery-filter button.active{


    background:var(--gold);


    color:#111;


}




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


.gallery-section{


    background:#050505;


}



.gallery{


    max-width:1400px;


    margin:auto;


    display:grid;


    grid-template-columns:


    repeat(4,1fr);


    gap:25px;


}




.gallery-item{


    position:relative;


    overflow:hidden;


    cursor:pointer;


    border:


    2px solid rgba(200,165,66,.25);


    background:#111;


}



.gallery-item img{


    width:100%;


    height:260px;


    object-fit:cover;


    transition:.6s;


    filter:


    grayscale(20%);


}



.gallery-item:hover img{


    transform:


    scale(1.15);


    filter:


    grayscale(0);


}



/* ==========================================================
   LEGENDA
========================================================== */


.gallery-caption{


    position:absolute;


    bottom:0;


    left:0;


    width:100%;


    padding:20px;


    background:


    linear-gradient(

    transparent,

    rgba(0,0,0,.9)

    );


    color:var(--gold);


    font-family:'Cinzel',serif;


    opacity:0;


    transform:


    translateY(30px);


    transition:.4s;


}



.gallery-item:hover .gallery-caption{


    opacity:1;


    transform:


    translateY(0);


}
/* ==========================================================
   ARQUIVO HISTÓRICO
========================================================== */


.archive-box{


    text-align:center;


    padding:80px 30px;


    background:


    linear-gradient(

    rgba(0,0,0,.8),

    rgba(0,0,0,.9)

    ),


    url("../../img/backgrounds/paper.jpg");


    background-size:cover;


}



.archive-box h2{


    font-family:'Cinzel',serif;


    color:var(--gold);


    font-size:45px;


}



.archive-box p{


    color:#ddd;


    max-width:700px;


    margin:30px auto;


    line-height:1.8;


}



/* ==========================================================
   ESTATÍSTICAS
========================================================== */


.archive-stats{


    display:flex;


    justify-content:center;


    gap:80px;


    margin-top:50px;


}



.archive-stats h3{


    color:var(--gold);


    font-family:'Cinzel',serif;


    font-size:45px;


}



.archive-stats p{


    margin:0;


}



/* ==========================================================
   EFEITO FOTO ANTIGA
========================================================== */


.gallery-item::after{


    content:"";


    position:absolute;


    inset:0;


    background:


    linear-gradient(

    135deg,

    transparent,

    rgba(200,165,66,.15)

    );


    pointer-events:none;


}



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


@media(max-width:1100px){



.gallery{


grid-template-columns:


repeat(3,1fr);


}



}




@media(max-width:800px){



.gallery{


grid-template-columns:


repeat(2,1fr);


}



.archive-stats{


gap:30px;


flex-wrap:wrap;


}



}



@media(max-width:550px){



.gallery{


grid-template-columns:


1fr;


}



.gallery-filter{


flex-wrap:wrap;


padding:30px;


}



.gallery-item img{


height:220px;


}



.archive-stats h3{


font-size:35px;


}



}