/*==================================================
    FINVEXER
    GALLERY.CSS
==================================================*/


/*=========================
      GALLERY GRID
=========================*/

.gallery{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:18px;

    margin:25px 0;

}


/*=========================
      THUMBNAIL
=========================*/

.thumb{

    position:relative;

    overflow:hidden;

    aspect-ratio:1/1;

    background:#021227;

    border:3px solid #45a6ff;

    border-radius:8px;

    cursor:pointer;

    transition:.25s;

    box-shadow:
    inset 0 0 20px rgba(0,0,0,.8),
    0 0 10px rgba(0,170,255,.35);

}


/*=========================
      IMAGE
=========================*/

.thumb img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:
    transform .35s,
    filter .35s;

}


/*=========================
      CYBER CORNERS
=========================*/

.thumb::before,
.thumb::after{

content:"";

position:absolute;

width:18px;
height:18px;

border:2px solid cyan;

opacity:.6;

transition:.3s;

}

.thumb::before{

left:5px;
top:5px;

border-right:none;
border-bottom:none;

}

.thumb::after{

right:5px;
bottom:5px;

border-left:none;
border-top:none;

}


/*=========================
      SCANLINES
=========================*/

.thumb span{

position:absolute;

inset:0;

pointer-events:none;

background:

repeating-linear-gradient(

0deg,

rgba(255,255,255,.05) 0px,

rgba(255,255,255,.05) 2px,

transparent 2px,

transparent 4px);

opacity:.25;

}


/*=========================
      HOVER
=========================*/

.thumb:hover{

transform:translateY(-8px);

border-color:#58ff79;

box-shadow:

0 0 25px cyan,

0 0 40px rgba(0,255,255,.5),

inset 0 0 15px rgba(255,255,255,.2);

}

.thumb:hover img{

transform:scale(1.08);

filter:brightness(1.12)
contrast(1.08);

}

.thumb:hover::before,
.thumb:hover::after{

width:28px;

height:28px;

border-color:#58ff79;

opacity:1;

}


/*=========================
      TITLE BAR
=========================*/

.galleryTitle{

margin-bottom:15px;

padding:12px;

background:#062664;

border:2px solid #4daeff;

color:#58ff79;

font-size:1.2rem;

letter-spacing:2px;

}


/*=========================
      PAGE CONTROLS
=========================*/

.galleryButtons{

margin-top:25px;

display:flex;

justify-content:center;

align-items:center;

gap:30px;

}

.galleryButtons button{

min-width:150px;

font-size:.95rem;

letter-spacing:2px;

}


/*=========================
      PAGE NUMBER
=========================*/

.galleryButtons div{

font-size:1rem;

font-weight:bold;

color:#8ceeff;

text-shadow:

0 0 8px cyan;

}


/*=========================
      RANDOM BUTTON
=========================*/

.random{

margin-top:20px;

display:flex;

justify-content:center;

}

.random button{

width:220px;

font-size:1rem;

background:#063d88;

}

.random button:hover{

background:#0b78ff;

}


/*=========================
      IMAGE LABEL
=========================*/

.thumb p{

position:absolute;

bottom:0;

left:0;

right:0;

padding:8px;

background:

linear-gradient(

transparent,

rgba(0,0,0,.85));

text-align:center;

font-size:.8rem;

opacity:0;

transition:.25s;

}

.thumb:hover p{

opacity:1;

}


/*=========================
      LOADING ANIMATION
=========================*/

.thumb.loading::after{

content:"LOADING";

position:absolute;

inset:0;

display:flex;

justify-content:center;

align-items:center;

background:#041022;

color:#58ff79;

animation:pulse 1s infinite;

}

@keyframes pulse{

0%{

opacity:.3;

}

50%{

opacity:1;

}

100%{

opacity:.3;

}

}


/*=========================
      EMPTY SLOT
=========================*/

.thumb.empty{

display:flex;

justify-content:center;

align-items:center;

font-size:3rem;

color:#3d6da6;

background:#021020;

}

.thumb.empty:hover{

color:#58ff79;

}


/*=========================
      RESPONSIVE
=========================*/

@media(max-width:1200px){

.gallery{

grid-template-columns:repeat(3,1fr);

}

}

@media(max-width:850px){

.gallery{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:550px){

.gallery{

grid-template-columns:1fr;

}

.galleryButtons{

flex-direction:column;

gap:15px;

}

.galleryButtons button{

width:100%;

}

.random button{

width:100%;

}

}