/*==================================================
    GALLERY HUB CSS
    Mikster Gallery v2.0.0
    
    made by Miguel Castro
==================================================*/


/*==================================================
    PAGE TITLE
==================================================*/

.pageTitle{

    text-align:center;

    margin-bottom:35px;

    color:var(--text);

}


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

.yearGrid{

    display:grid;

    grid-template-columns:

        repeat(auto-fit,240px);

    justify-content:center;

    gap:40px;

    width:100%;

}


/*==================================================
    LINK
==================================================*/

.yearCard{

    text-decoration:none;

    color:inherit;

}


/*==================================================
    CARD
==================================================*/

.yearCardContent{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    width:240px;

    height:240px;

    background:var(--container);

    border:3px solid var(--outline);

    border-radius:10px;

    transition:

        transform .25s ease,

        box-shadow .25s ease,

        border-color .25s ease;

}

.yearCardContent:hover{

    transform:translateY(-6px);

    border-color:var(--text);

    box-shadow:

        0px 0px 18px rgba(0,0,0,.25);

}


/*==================================================
    PREVIEW
==================================================*/

.yearPreview{

    width:180px;

    height:100px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:20px;

    background:rgba(255,255,255,.05);

    border:2px dashed var(--outline);

    border-radius:8px;

    color:var(--text);

    opacity:.65;

    font-size:.9rem;

}


/*==================================================
    YEAR
==================================================*/

.yearCardContent h2{

    color:var(--text);

    font-size:2rem;

    margin-bottom:10px;

}


/*==================================================
    DESCRIPTION
==================================================*/

.yearCardContent p{

    color:var(--text);

    opacity:.85;

    text-align:center;

    padding:0 12px;

}


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

@media(max-width:900px){

    .yearGrid{

        grid-template-columns:

            repeat(auto-fit,200px);

    }

    .yearCardContent{

        width:200px;

        height:200px;

    }

}

@media(max-width:600px){

    .yearGrid{

        grid-template-columns:1fr;

    }

    .yearCardContent{

        width:260px;

        height:260px;

        margin:auto;

    }

}