/* =========================================================
   GLOBAL PORTFOLIO SETTINGS
   ========================================================= */


:root {

    /* PAGE */

    --background-colour: #eee7dc;


    /* GRID */

    --grid-width: 700px;

    --grid-gap: 14px;


    /* WINDOWS */

    --window-background: #e2d2c2;

    --window-corner: 14px;


    /* ANIMATION */

    --transition-speed: 700ms;

}



/* =========================================================
   BASIC PAGE
   ========================================================= */


* {
    box-sizing: border-box;
}


html,
body {

    margin: 0;

    width: 100%;
    min-height: 100%;

}


body {

    background-color: var(--background-colour);

}



/* =========================================================
   COVER
   ========================================================= */


.cover {

    min-height: 100vh;

    display: flex;

    justify-content: center;
    align-items: center;

    padding: 6vw;

}



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


.project-grid {

    width: min(58vw, var(--grid-width));

    display: grid;

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

    gap: var(--grid-gap);

}



/* =========================================================
   PROJECT WINDOW
   ========================================================= */


.project-window {

    display: block;

    position: relative;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    border-radius: var(--window-corner);

    background-color: var(--window-background);

    text-decoration: none;

    cursor: pointer;

}



.project-window img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 400ms ease,
        filter 400ms ease;

}



.project-window:hover img {

    transform: scale(1.03);

}



/* =========================================================
   OPENING ANIMATION
   ========================================================= */


.expanding-window {

    position: fixed;

    z-index: 1000;

    margin: 0;

    overflow: hidden;

    pointer-events: none;

    transition:

        left var(--transition-speed)
        cubic-bezier(.77, 0, .18, 1),

        top var(--transition-speed)
        cubic-bezier(.77, 0, .18, 1),

        width var(--transition-speed)
        cubic-bezier(.77, 0, .18, 1),

        height var(--transition-speed)
        cubic-bezier(.77, 0, .18, 1),

        border-radius var(--transition-speed)
        cubic-bezier(.77, 0, .18, 1);

}



.expanding-window img {

    width: 100%;
    height: 100%;

    object-fit: cover;

}



/* =========================================================
   SMALLER SCREENS
   ========================================================= */


@media (max-width: 700px) {

    .project-grid {

        width: 88vw;

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

    }

}