

.sessionIntro{
    padding-top: 7rem;
    padding-bottom: 3rem;
}

.sessionIntro h2{
    font-family: boldText;
    font-size: clamp(1.7rem, 2.5vw, 2.3rem);
    letter-spacing: .15rem;
    padding-bottom: 1rem;
}

.sessionIntro .introBody{
    max-width: 70%;
    margin: 0 auto;
}

.introBody {
    font-family: regularText;
    width: 50ch;
    font-size: 1.2rem;
    font-weight: 100;
    letter-spacing: .1rem;
    color: #3a3a3a;
}


.sessionsDes{
    padding-bottom: 4rem;
}

.sessionsDes h2{
    font-family: boldText;
    font-size: clamp(1.7rem, 2.5vw, 2.3rem);
    letter-spacing: .15rem;
}

.sessionsGrid{
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content:space-around;
}

.sessImg{
    grid-column: 1 / 3;
    grid-row: 1;
}

.sessImg img{
    max-width: 100%;
}

.sessionsText {
    font-family: lightText;
    font-size: 1.3rem;
    max-width: 50ch;
    grid-column: 3 / 5;
    grid-row: 1;
    align-self: center;
}

.sessionsText li{
    list-style-type: none;
}

.sessionsText ul li:nth-of-type(1) {
    font-family: boldText;
    font-size: 1.5rem;
    font-weight: bold;
}

.odd .sessImg{
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row: 1;
}

.odd .sessionsText{
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row: 1;
    justify-self: center;
}

@media only screen and (max-width:800px) {
    .sessImg{
        grid-column: 1 / 5;
        grid-row: 1;
    }
    .sessionsText{
        grid-column: 2 / 5;
        grid-row: 2;
    }
    .odd .sessImg{
        grid-column-start: 1;
        grid-column-end: 5;
        grid-row: 1;
    }
    
    .odd .sessionsText{
        grid-column-start: 2;
        grid-column-end: 5;
        grid-row: 2;
        justify-self: center;
    }
}

@media only screen and (max-width: 600px) {
    .introBody {
        max-width: 100%!important;
    }

    .introBody p{
        font-weight: 200;
    }
    .sessionsText, .odd .sessionsText {
        grid-column: 1 / 5;
        justify-self: center;
    }
    
}