/* ==========================================
   INFORMATION SECTION
========================================== */

.information-section{
    max-width:1400px;
    margin:4rem auto;
    padding:0 1rem;
}

.information-grid{
    max-width:1400px;
    width:100%;
    margin:3rem auto;
    padding:0 1rem;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:2rem;

    box-sizing:border-box;
}


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

.information-card{
    position:relative;
    overflow:hidden;
    border-radius:18px;
    cursor:pointer;
    box-shadow:0 10px 25px rgba(0,0,0,.15);
    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.information-card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 40px rgba(0,0,0,.25);
}

.information-card img{
    width:100%;
    height:240px;
    object-fit:cover;
    display:block;
}


/* ==========================================
   OVERLAY
========================================== */

.information-overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:flex-end;
    padding:1.5rem;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.80),
        rgba(0,0,0,.15),
        transparent
    );
}

.information-overlay h3{
    margin:0;
    color:#fff;
    font-size:1.35rem;
    font-weight:700;
}


/* ==========================================
   MODAL
========================================== */

.information-modal{
    position:fixed;
    inset:0;
    display:none;
    justify-content:center;
    align-items:center;
    background:rgba(0,0,0,.75);
    z-index:9999;
    padding:2rem;
}

.information-modal-content{
    position:relative;
    width:min(900px,100%);
    max-height:90vh;
    overflow-y:auto;
    background:#fff;
    border-radius:20px;
    box-shadow:0 20px 50px rgba(0,0,0,.35);
}

#information-modal-image{
    width:100%;
    max-height:350px;
    object-fit:cover;
    display:block;
}

.information-body{
    padding:2rem;
}

#information-modal-title{
    margin:0 0 1.5rem;
    font-size:2rem;
    color:#222;
}

#information-modal-description{
    color:#444;
    line-height:1.8;
    font-size:1rem;
}


/* ==========================================
   CLOSE BUTTON
========================================== */

.information-close{
    position:absolute;
    top:15px;
    right:15px;
    width:42px;
    height:42px;
    border:none;
    border-radius:50%;
    background:#fff;
    color:#222;
    font-size:1.8rem;
    cursor:pointer;
    box-shadow:0 5px 15px rgba(0,0,0,.2);
    transition:.25s;
}

.information-close:hover{
    background:#FFD54F;
    transform:rotate(90deg);
}

/* ==========================================
   MOBILE PORTRAIT
========================================== */

/* ==========================================
   MOBILE PORTRAIT
========================================== */

@media only screen and (min-width:240px) and (max-width:600px) and (orientation:portrait){

    .information-section{
        max-width:100%;
        margin:2rem auto;
        padding:0 0.3rem;
    }

    .information-grid{
        display:grid;
        grid-template-columns:1fr;
        gap:1rem;
    }

    .information-card img{
        height:220px;
    }

    .information-overlay{
        padding:1rem;
    }

    .information-overlay h3{
        font-size:1.2rem;
    }

    .information-modal{
        padding:1rem;
    }

    .information-modal-content{
        width:100%;
        max-height:95vh;
    }

    #information-modal-image{
        max-height:220px;
    }

    .information-body{
        padding:1.25rem;
    }

    #information-modal-title{
        font-size:1.5rem;
    }

    #information-modal-description{
        font-size:1rem;
        line-height:1.7;
    }

}


/* ==========================================
   MOBILE LANDSCAPE
========================================== */

@media only screen and (min-width:481px) and (max-width:950px) and (orientation:landscape){

    .information-grid{
        grid-template-columns:repeat(2,1fr);
        gap:1.5rem;
    }

    .information-card img{
        height:200px;
    }

    #information-modal-image{
        max-height:260px;
    }

}


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

@media only screen and (min-width:601px) and (max-width:1024px) and (orientation:portrait){

    .information-grid{
        grid-template-columns:repeat(2,1fr);
        gap:1.5rem;
    }

    .information-card img{
        height:220px;
    }

}


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

@media only screen and (min-width:951px) and (max-width:1366px) and (orientation:landscape){

    .information-grid{
        grid-template-columns:repeat(3,1fr);
        gap:2rem;
    }

}


/* ==========================================
   LAPTOP
========================================== */

@media only screen and (min-width:1367px) and (max-width:1599px) and (orientation:landscape){

    .information-grid{
        grid-template-columns:repeat(4,1fr);
        gap:2rem;
    }

}


/* ==========================================
   DESKTOP
========================================== */

@media only screen and (min-width:1600px) and (max-width:1920px) and (orientation:landscape){

    .information-grid{
        grid-template-columns:repeat(5,1fr);
        gap:2rem;
    }

}


/* ==========================================
   LARGE SCREENS
========================================== */

@media only screen and (min-width:1921px){

    .information-section{
        max-width:1800px;
    }

    .information-grid{
        grid-template-columns:repeat(6,1fr);
        gap:2rem;
    }

}