body {
    /* Positioning */
    margin: 0;

    font-family: system-ui, sans-serif;

    background-color: #fafafa;
}
/* Top of Page */

.title {
    /* Positioning */
    margin: 0 auto 10vh;

    /* Layout */


    /* Box Model */
    height: 25vh;
    padding-top: 15vh;

    /* Typography */
    color: #FFFFFF;
    text-align: center;

    /* Visual */
    background-color: #F16C22;
    background-image: linear-gradient(to right, #F16C22, #000);
    background-size: cover; 
}

.title p {
    /* Positioning */
    margin: 0 auto;

    /* Box Model */
    max-width: 850px;

    /* Typography */
    text-align: center;
}

/* Grid Links */
.showcase-link {
    margin: 0 20vw 5rem;
}

.showcase-link a {
    color: inherit;
    text-decoration: none;
}

.showcase-link:hover .showcase-grid {
    background-color: #E1E1E1;
    color: #F16C22;
}

.showcase-link:hover img {
    transform: scale(1.03);
}

/* Project Tiles */
.showcase-grid {
    
    display: grid;
    overflow: hidden;
    grid-template-columns: 1fr 2fr;
    gap: 2rem 3rem;
    max-width: 1100px;
    border-radius: 10px;
    box-shadow: 0 0 0 1px #e5e5e5;
    transition: background-color 0.4s ease;
}

.showcase-grid img {
    grid-column: 1;
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.showcase-grid p {
    grid-column: 2;
    padding: 1rem 3rem 0.4rem 0rem;
}

.description {
    font-weight: 600;
    color: #F16C22;
}

.showcase-grid.reverse-grid {
    grid-template-columns: 2fr 1fr;
}

.showcase-grid.reverse-grid img {
    grid-column: 2;
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.showcase-grid.reverse-grid p {
    grid-column: 1;
    grid-row: 1;
    padding: 1rem 0rem 0.4rem 3rem;
}

@media (max-width: 1000px) {
    .showcase-link {
        margin-bottom: 3rem;
    }
    
    .showcase-grid {
        grid-template-rows: 1fr 2fr;
        height: 100%;
        width: 100%;
        object-fit: cover;
        transition: transform 0.4s ease;
        display: block;
    }

     .showcase-grid.reverse-grid {
        grid-template-rows: 1fr 2fr;
        height: 100%;
        width: 100%;
        object-fit: cover;
        transition: transform 0.4s ease;
        display: block;
    }   

    .showcase-grid img {
        grid-row: 1;
    }

    .showcase-grid.reverse-grid img {
        grid-row: 1;
    }

    .showcase-grid p {
        grid-row: 2;
        padding: 0 1rem;
        font-size: 0.8rem;
    }

    .showcase-grid.reverse-grid p {
        grid-row: 2;
        padding: 0 1rem;
        font-size: 0.8rem;
    }
}