.page-content {
    position: relative;
    z-index: 5;

    width: 100%;

    padding:
        140px
        30px;

    background: #111;
}


/*
    The extra bottom padding above is intentional.

    Your footer is 72vh tall and fixed, so this gives the
    final project enough room to scroll completely above it
    before the footer covers the page.
*/

.scroll-space {
    background: #111;
}

.parent {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

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

    gap: 90px 24px;
}


/* ================================
   PROJECT CARDS
   ================================ */

.project {
    grid-column: 1 / span 2;

    min-height: 330px;

    display: grid;
    grid-template-columns: 1.05fr 1fr;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #242424,
            #191919
        );

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 20px;

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.25);

    transition:
        transform 350ms ease,
        border-color 350ms ease,
        box-shadow 350ms ease;
}


/* Even projects move to the right */

.project:nth-child(even) {
    grid-column: 2 / span 2;
}


/* subtle hover */

.project:hover {
    transform: translateY(-5px);

    border-color: rgba(255, 255, 255, 0.16);

    box-shadow:
        0 28px 60px rgba(0, 0, 0, 0.35);
}


/* ================================
   TEXT
   ================================ */

.project-text {
    padding: 45px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}


.project-text h2 {
    margin: 0 0 18px;

    color: #A5A5A5;

    font-size: 1.8rem;
    font-weight: 500;

    letter-spacing: 0.03em;
}


.project-text p {
    margin: 0;

    max-width: 420px;

    color: #d0d0d0;

    font-size: 1rem;
    line-height: 1.65;
}


/* ================================
   IMAGES
   ================================ */

.project-image {
    position: relative;

    min-height: 330px;

    overflow: hidden;

    background: #303030;
}


.project-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 600ms ease;
}


.project:hover .project-image img {
    transform: scale(1.025);
}


/*
    RIGHT-HAND CARDS

    Move the image to the left side,
    so the images always face the outside
    edges of the alternating layout.
*/

.project:nth-child(even) .project-image {
    order: -1;
}


/* ================================
   OPTIONAL IMAGE OVERLAY
   ================================ */

.project-image::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            to right,
            rgba(0, 0, 0, 0.10),
            transparent
        );
}


.project:nth-child(even) .project-image::after {
    background:
        linear-gradient(
            to left,
            rgba(0, 0, 0, 0.10),
            transparent
        );
}


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

@media (max-width: 900px) {

    .page-content {
        padding:
            120px
            25px
            calc(78vh + 100px);
    }

    .parent {
        gap: 60px 20px;
    }

    .project-text {
        padding: 32px;
    }

    .project-text h2 {
        font-size: 1.5rem;
    }

}


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

@media (max-width: 650px) {

    .page-content {
        padding:
            110px
            20px
            calc(90vh + 80px);
    }


    .parent {
        display: flex;
        flex-direction: column;

        align-items: center;

        gap: 45px;
    }


    /*
        No more staggered layout.
        Every project is centered.
    */

    .project,
    .project:nth-child(even) {
        width: 100%;
        max-width: 500px;

        display: flex;
        flex-direction: column;

        min-height: 0;
    }


    /*
        Always put image above text on mobile,
        regardless of which side it occupied
        on desktop.
    */

    .project .project-image,
    .project:nth-child(even) .project-image {
        order: -1;

        width: 100%;
        min-height: 220px;
        height: 220px;
    }


    .project-text {
        padding: 28px;
    }


    .project-text h2 {
        font-size: 1.4rem;
    }


    .project-text p {
        font-size: 0.95rem;
    }


    /*
        Less movement on touch-sized screens.
    */

    .project:hover {
        transform: none;
    }

    .project:hover .project-image img {
        transform: none;
    }

}