article {
    padding: 0;
}

.project-layout {
    display: grid;
    grid-template-columns: 30% auto;
    grid-template-rows: auto;
    column-gap: 50px;
}

.project-info {
    grid-area: 1 / 1 / 3 / 2; 
    line-height: 1.5em;
}

.project-info h1{
    margin: 0;
    padding: 25px 0 20px 0;

    font-family: RodinProDB;
    letter-spacing: 0.1rem;
}

.project-info dl{
    margin: 0;
    padding: 0;
}

.project-info dd{
    margin: 0;
    padding: 0; 

    font-family: RodinProRegular, sans-serif;
    letter-spacing: 0.1rem;
}

.project-info dd.description{
    margin: 0;
    padding-top: 15px;
}

.project-screen {
    grid-area: 1 / 2 / 2 / 3;
    padding-top: 20px;
    box-sizing: border-box;
    height: fit-content;
}

.project-screen iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9; 
    border: none;
    display: block;
    background-color: #3A3831;
}

.project-gallery {
    grid-area: 2 / 2 / 3 / 3;
}

.project-gallery ul {
    margin: 0;
    padding: 10px 0 0 0;
    list-style: none;
}

.project-gallery img {
    width: 100%;
    border: 2px solid #ACA993;
}


/*** MOBILE ***/
@media (max-width: 960px){
    .project-layout {
        grid-template-columns: auto;
        grid-template-rows: auto;
        column-gap: 0;
    }

    .project-info {
        grid-area: 1 / 1 / 2 / 2; 
        padding-bottom: 25px;
    }

    .project-screen {
        grid-area: 2 / 1 / 3 / 2;
    }

    .project-gallery {
        grid-area: 3 / 1 / 4 / 2;
    }
}