#header1{
    margin: 3vw auto 0 auto;
    padding: 0 6vw;
    color: var(--k4cDarkBlue);
    box-sizing: border-box;
}

#midBar1{
    height: 33vw;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    justify-content: space-between;
}

#midBar1Left{
    width: 32.5%;
    height: 100%;
    background-color: var(--k4cDarkBlue);
    border-radius: 1rem;
    word-break: normal;
}
#mid1Photo1{
    max-width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 1rem 1rem 0 0;
}
#mid1Header1{
    color: var(--k4cWhite);
    margin: 1.4vw;
}
#mid1Text1{
    color: var(--k4cWhite);
    margin: 1.4vw;
}

#midBar1Mid{
    width: 32.5%;
    height: 100%;
    background-color: var(--k4cDarkBlue);
    border-radius: 1rem;
    word-break: normal;
}
#mid1Photo2{
    max-width: 100%;
    height: 32.8%;
    object-fit: cover;
    border-radius: 1rem 1rem 0 0;
}
#mid1Header2{
    color: var(--k4cWhite);
    margin: 1.4vw;
}
#mid1Text2{
    color: var(--k4cWhite);
    margin: 1.4vw;
}

#midBar1Right{
    width: 32.5%;
    height: 100%;
    background-color: var(--k4cDarkBlue);
    border-radius: 1rem;
    word-break: normal;
}
#mid1Photo3{
    max-width: 100%;
    height: auto;
    border-radius: 1rem 1rem 0 0;
}
#mid1Header3{
    margin: 1.4vw;
    color: var(--k4cWhite);
}
#mid1Text3{
    color: var(--k4cWhite);
    margin: 1.4vw;
}

/*max-wdidth: 600px, min-width: 601px, 768px, 992px, 1200px*/
@media only screen and (max-width: 600px){
    
    p{
        font-size: 2.2vw;
    }
    
    .mainContainer{
        width: 92vw;
    }
    
    #midBar1{
        height: 80vw;
        line-height: 3.5vw;
    }
    #midBar1Left{
        width: 33%;
    }
    #midBar1Mid{
        width: 33%;
    }
    #mid1Photo2{
        height: 25.3%;
    }
    #mid1Text2{
        margin: 0.5vw;
    }
    #midBar1Right{
        width: 33%;
    }
}