* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    width: 100%;
    height: auto;
    background-color: #f0ecef;
    padding: 50px 0;
}
main{
    width: 1090px;
    height: auto;
    display: grid;
    grid-template-rows: 50px 100px 100px 70px 0 10px 100px 100px 100px 0;
    /* grid-template-columns: 300px 300px 300px 300px 300px; */
    grid-template-columns: repeat(4, 250px);
    gap: 30px;
    /* border: 2px solid red; */
    margin: auto;
}
section{
    border-radius: 10px;
}
.one{
    grid-row: 1/4;
    grid-column: 2/4;
    text-align: center;
    background-color: hsl(256, 67%, 59%);
    padding: 50px 20px;
}
.one h1{
    font-size: 3.7rem;
    color: #fff;
    margin-bottom: 30px;
    line-height: 3rem;
}
.one h1 span{
    color: hsl(39, 100%, 71%);
}
.one .image1{
    width: 220px;
    margin: auto;
    margin-bottom: 5px;
}
.one p{
    font-size: 1.5rem;
    color: #fff;
}
.two{
    grid-row: 4/8;
    grid-column: 2/3;
    padding: 20px 0;
    padding-left: 20px;
    background-color: #fff;
    overflow: hidden;
}
.two .image2{
    width: 315px;
    margin-bottom: 20px;
}
.two h1{
    font-size: 2rem;
    line-height: 1.6rem;
}
.three{
    grid-row: 4/8;
    grid-column: 3/4;
    overflow: hidden;
    padding: 0 20px;
    padding-top: 20px;
    background-color: hsl(39, 100%, 71%);
}
.three h1{
    font-size: 2rem;
    line-height: 1.7rem;
    margin-bottom: 14px;
}
.four{
    grid-row: 1/8;
    grid-column: 4/5;
    background-color: hsl(254, 88%, 90%);
    padding: 40px 0;
    padding-left: 30px;
    overflow: hidden;
}
.four h1{
    font-size: 2rem;
    line-height: 1.6rem;
    margin-bottom: 20px;
}
.four .image4{
    height: 280px;
    width: 350px;
    margin-bottom: 20px;
}
.four .image4 img{
    height: 100%;
}
.four p{
    font-size: 1.3rem;
    padding-right: 30px;
    line-height: 1.5rem;
}
.five{
    grid-row: 8/11;
    grid-column: 3/5;
    display: flex;
    align-items: center;
    padding: 20px;
    background-color: hsl(256, 67%, 59%);
}
.five .image5{
    width: 280px;
}
.five h1{
    font-size: 2.25rem;
    color: #fff;
    width: 300px;
    line-height: 2rem;
    padding-left: 10px;
}
.six{
    grid-row: 8/11;
    grid-column: 2/3;
    background-color: #fff;
    padding: 20px;
}
.six h1{
    font-size: 3.7rem;
    margin-bottom: px;
}
.six p{
    font-size: 1.3rem;
    margin-bottom: 35px;
}
.six .image6{
    width: 180px;
}
.seven{
    grid-row: 1/5;
    grid-column: 1/2;
    background-color: #faeee2;
    padding: 60px 20px;
}
.seven h1{
    font-size: 2.7rem;
    margin-bottom: 25px;
    line-height: 2.2rem;
}
.seven h1 span{
    color: blueviolet;
}
.seven .image7{
    width: 100%; 
}
img{
    width: 100%;
}
.eight{
    grid-row: 5/11;
    grid-column: 1/2;
    padding: 20px 10px 20px 20px;
    background-color: hsl(39, 100%, 71%);
}
.eight h1{
    font-size: 2.6rem;
    line-height: 2.3rem;
    margin-bottom: 70px;
}
.eight .image8{
    height: 240px; 
}
.eight .image8 img{
    height: 100%; 
}

@media screen and (max-width: 375px){
    body{
        width: 100%;
        height: auto;
        background-color: #f0ecef;
        padding: 50px 20px;
    }
    main{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;

    }
    section{
        border-radius: 10px;
    }
    .one{ 
        text-align: center;
        background-color: hsl(256, 67%, 59%);
        padding: 50px 30px;
    }
    .one h1{
        font-size: 3rem;
        color: #fff;
        margin-bottom: 20px;
        line-height: 3rem;
    }
    .two{
        padding: 30px;
    }
    .two .image2{
        width: 100%;
    }
    .two h1{
        font-size: 1.5rem;
        line-height: 1.5rem;
    }
    .three{
        height: 230px;
    }
    .three h1{
        font-size: 1.5rem;
        line-height: 2rem;
        margin-bottom: 10px;
    }
    .three .image3{
        width: 69%;
    }
    .four{
        background-color: hsl(254, 88%, 90%);
        padding: 30px;
        overflow: hidden;
        text-align: center;
    }
    .four h1{
        font-size: 1.5rem;
        line-height: 2rem;
        margin-bottom: 20px;
    }
    .four .image4{
        width: 100%;
        height: 250px;
        margin-bottom: 20px;
    }
    .four p{
        font-size: 1.25rem;
        padding-right: 0;
    }
    .five{
        display: flex;
        flex-direction: column;
        text-align: center;
        padding: 30px 70px;
        background-color: hsl(256, 67%, 59%);
    }
    .five .image5{
        width: 100%;
        margin-bottom: 20px;
    }
    .five h1{
        padding: 0 40px;
        font-size: 1.8rem;
        line-height: 1.5rem;
    }
    .six{
        text-align: left;
    }
    .six h1{
        font-size: 2.5rem;
    }
    .six p{
        font-size: 1.2rem;
        margin-bottom: 20px;
    }
    .six .image6{
        width: 160px;
    }
    .seven{
        padding: 30px;
    }
    .seven h1{
        font-size: 1.9rem;
        margin-bottom: 25px;
        line-height: 1.5rem;
    }
    .seven h1 span{
        color: blueviolet;
    }
    .seven .image7{
        width: 180px; 
    }
    img{
        width: 100%;
    }
    .eight{
        padding: 30px;
    }
    .eight h1{
        font-size: 2rem;
        margin-bottom: 30px;
        line-height: 1.7rem;
    }
    .eight .image8{
        height: 230px;
        width: 230px; 
    }
    .eight .image8 img{
        height: 100%; 
    }
}

@media screen and (min-width: 376px) and (max-width: 550px) {
    body{
        width: 100%;
        height: auto;
        background-color: #f0ecef;
        padding: 50px 20px;
    }
    main{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;

    }
    .one{ 
        text-align: center;
        background-color: hsl(256, 67%, 59%);
        padding: 50px 30px;
    }
    .one h1{
        font-size: 3.7rem;
        color: #fff;
        margin-bottom: 20px;
    }
    .two{
        padding: 20px;
    }
    .two .image2{
        width: 100%;
    }
    .two h1{
        font-size: 1.8rem;
    }
    .three{
        height: 245px;
    }
    .three h1{
        font-size: 1.8rem;
        margin-bottom: 20px;
    }
    .three .image3{
        width: 65%;
    }
    .four{
        background-color: hsl(254, 88%, 90%);
        padding: 30px 20px;
        overflow: hidden;
        text-align: center;
    }
    .four h1{
        font-size: 2rem;
        line-height: 2rem;
        margin-bottom: 20px;
    }
    .four .image4{
        width: 100%;
        margin-bottom: 20px;
    }
    .four p{
        font-size: 1.5rem;
        padding: 0 10px;
    }
    .five{
        display: flex;
        flex-direction: column;
        text-align: center;
        padding: 30px 70px;
        background-color: hsl(256, 67%, 59%);
    }
    .five .image5{
        width: 100%;
        margin-bottom: 20px;
    }
    .five h1{
        padding-left: 0;
    }
    .six{
        text-align: left;
    }
    .six h1{
        font-size: 3rem;
    }
    .six p{
        font-size: 1.5rem;
    }
    .six .image6{
        width: 200px;
    }
    .seven{
        padding: 30px;
    }
    .seven h1{
        font-size: 2.4rem;
        margin-bottom: 30px;
        line-height: 2rem;
    }
    .seven h1 span{
        color: blueviolet;
    }
    .seven .image7{
        width: 250px; 
    }
    img{
        width: 100%;
    }
    .eight{
        padding: 30px;
    }
    .eight h1{
        font-size: 2.2rem;
        margin-bottom: 20px;
    }
    .eight .image8{
        height: 270px;
        width: 260px; 
    }
    .eight .image8 img{
        height: 100%; 
    }
}