/**LANDING PAGE */

/**INTRO TEXT */

.intro-text-wrapper{
    padding: 0 1em 0 1em;
    padding-top:0;
    padding-bottom: 0;
    z-index: 100;
}

.intro-title{
    font-size: 7.75rem;
    line-height: 1;
    font-weight: 700;
    padding-bottom: 2.5rem;
}



/**   GRID   */

.one {
    grid-area: one;
}

.two {
    grid-area: two;
}

.three {
    grid-area: three;
}

.four {
    grid-area: four;
}

.five {
    grid-area: five;
}

.six {
    grid-area: six;
}

.seven {
    grid-area: seven;
}

.eight {
    grid-area: eight;
}

.main-grid{
    display:-ms-grid;
    display:grid;
    grid-template-columns: repeat(8, 1fr);
    grid-auto-columns:1fr;
    grid-column-gap:2.5rem;
    grid-row-gap:50px;
    grid-template-areas:"one one one one one one . ."
                        ". . two two two . . ."
                        ". . two two two three three three"
                        "four four four four . . . ."
                        "four four four four five five five five"
                        " six six six . . . . ."
                        " six six six seven seven seven . ."
                        ;
    -ms-grid-rows:auto;
    grid-template-rows:auto;
    padding-bottom: 9rem;
}

.grid-image{
    display:block
}

.grid-image img{
    object-fit: cover;
    width: 100%;
    max-height: 100%;
}

.project-title {
    margin-top:5px;
    font-size:2rem;
    line-height:1.2;
    font-weight:600
}




/**INFO PAGE */

/**   ABOUT   */

.about {
    min-height: 100vh;
    min-height: 100svh;

}

.about-grid{
    display:flex;
    flex-direction: row;
    gap: 5rem;
    justify-content: space-between;
    padding-bottom: 5rem;
}

.about-image{
    min-width: 500px;
    flex-basis: 30vw;
	flex-grow: 0;
	flex-shrink: 0;
}

.about-text {
    display:flex;
    flex-direction: column;
}

.about-row{
    display:flex;
    gap: 3rem;
    flex-direction: row;
    justify-content: space-between;
}

.about-row-alt{
    display:flex;
    gap: 3rem;
    flex-direction: row;
}

.about-column{
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
}

.bio{
    margin-bottom:2rem;
    line-height:1.3;
    font-weight:500;
    font-size:2rem;    
}

.list-header{
    color: var(--clr-white);
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.list {
    font-size: 1.5rem;
    line-height: 1.4;
    font-weight: 400;
    letter-spacing:.4px;
}





/**   BREAK POINTS   */

@media screen and (max-width:1500px){

    .intro-title{
        font-size: 6rem;
        padding-bottom: 2rem;
    }

    .bio{
        font-size:1.65rem;    
    }

    .list-header, .list{
        font-size: 1.3rem;
    }

    .about-row{
        gap: 2rem;
    }
    
    .about-row-alt{
        gap: 2rem;
    }

}

@media screen and (max-width:1350px){

    .about-grid{
        display:flex;
        flex-direction: column;
        gap: 4rem;
        justify-content: space-between;
        padding-bottom: 5rem;
        width: 70vw;
    }

    .about-image{
        max-width: 500px;
        flex-basis: 10vw;
    }
}

@media screen and (max-width:1150px){

    .intro-title{
        font-size: 5rem;
    }

    .project-title {
        font-size:1.75rem;
    }

    .main-grid{
        display:-ms-grid;
        display:grid;
        grid-template-columns: repeat(8, 1fr);
        grid-auto-columns:1fr;
        grid-column-gap:2.5rem;
        grid-row-gap:50px;
        grid-template-areas:"one one one one one one . ."
                            ". two two two two . . ."
                            ". two two two two three three three"
                            "four four four four . . . ."
                            "four four four four five five five five"
                            " six six six . . . . ."
                            " six six six seven seven seven seven ."
                            ;
    
        -ms-grid-rows:auto;
        grid-template-rows:auto;
        padding-bottom: 8rem;
    }

    .about-grid{
        gap: 3rem;
    }

    .bio{
        font-size:1.5rem;           
    }

    .list-header, .list{
        font-size: 1.2rem;
    }
    


}

@media screen and (max-width:991px){

    .intro-text-wrapper{
        padding: 0;
    }

    .intro-title{
        font-size: 4.5rem;
    }

    .project-title {
        font-size:1.5rem;
        letter-spacing: 0.75px;
    }

    .about-section{
        margin-top:150px;
        padding-bottom: 200px;
    }
    
    .about-image {
        padding-bottom: 1.25rem;
    }

    .about-grid{
        gap: 2.5rem;
    }

    .list-header, .list{
        font-size: 1.2rem;
        line-height: 1.4;
        letter-spacing:.4px;
    }


    
}

@media screen and (max-width:850px){


.project-title {
    font-size:1.35rem;
}
}
    


@media screen and (max-width:780px){

    .intro-text-wrapper{
        padding: 0;
    }

    .intro-title{
        font-size: 4.5rem;
    }

    .project-title {
        font-size:1.75rem;
    }

    .main-grid{
        display:-webkit-box;
        display:-webkit-flex;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-pack:justify;
        -ms-flex-pack:justify;
        justify-content:space-between;
        -webkit-justify-content:space-between;
        gap: 3rem;
        padding-bottom: 12.5rem;
        flex-direction: column;
        padding-bottom: 7rem;

    }
    
    .grid-image{
        padding: 0;
    }

    .list-header, .list{
        font-size: 1.2rem;
    }



}

@media screen and (max-width:700px){

    .intro-title{
        font-size: 4rem;
    }
}


@media screen and (max-width:600px){

    .intro-title{
        font-size: 3.5rem;
    }

    .project-title {
        font-size:1.5rem;
    }

    .about-grid{
        gap: 4rem;
        justify-content: space-between;
        padding-bottom: 5rem;
        width: 100%;
    }

    .about-image{
        min-width: 100%;
        max-width: 100%;
        flex-basis: 30vw;
        flex-grow: 0;
        flex-shrink: 0;
    }

    .about-row{
        gap: 1rem;
    }

    .about-row-alt{
        gap: 1rem;
    }

    .column {
        flex-direction: column;
        gap: 2rem;
    }

}

@media screen and (max-width:500px){


    .about-section {
        margin-top: 125px;
        padding-bottom: 125px;
    }

    .about-grid {
        gap: 1rem;
    }

}

@media screen and (max-width:450px){
    .intro-title{
        font-size: 3rem;
    }

}

@media screen and (max-width:400px){

    .intro-title{
        font-size: 2.5rem;
    }

    .project-title {
        font-size:1.35rem;
    }

    .about-grid {
        gap: 0;
    }

    .bio{
        line-height:1.5;
        font-weight:400;
        font-size:1.2rem;        
    }



    

    .arrowgap{
        margin-bottom: 0;
    }

    .about-row{
        flex-direction: column;
        align-items: flex-start;
    }

    .about-row-alt{
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
}

@media screen and (max-width:300px){

    .intro-title{
        font-size: 2rem;
    }

}