* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body {
    background-color: rgb(230, 230, 230);
}

main {
    margin: 20px;
    display: grid;
    grid-template-columns: 140px 140px 140px 140px;
    grid-template-rows: 180px 155px 180px;
    justify-content: center;
    gap: 10px;


}

.box1 {
    width: 290px;
    padding: 10px;
    background-color: blueviolet;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    text-align: center;
    color: white;
    grid-column: 2/4;
    grid-row: 1/2;
}

.box1 img {
    width: 140px;
}

.box2 {
    width: 140px;
    height: 150px;
    display: flex;
    flex-direction: column;
    padding: 10px;
    background-color: white;
    overflow: hidden;
    grid-column: 2/3;
    grid-row: 2/3;
}

.box2 img {
    width: 160px;
}

.box3 {
    background-color: hsl(39, 100%, 71%);
    padding: 10px 10px 10px;
    width: 140px;
    height: 150px;
    overflow: hidden;
    grid-column: 3/4;
    grid-row: 2/3;
}

.box3 img {
    width: 140px;
}

.box4 {
    width: 140px;
    height: 340px;
    background-color: hsl(254, 88%, 90%);
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    grid-row: 1/3;
    grid-column: 4/5;
}

.box4 img {
    width: 140px;

}

.box5 {
    width: 300px;
    background-color: hsl(256, 67%, 59%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 10px;
    grid-column: 3/5;
    grid-row: 3/4;
}

.box5 img {
    width: 110px;
}

.box6 {
    background-color: white;
    width: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 10px;
    grid-column: 2/3;
    grid-row: 3/4;
}

.box6 img {
    width: 110px;
}

.box7 {
    background-color: rgba(255, 228, 196, 0.688);
    height: 260px;
    width: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 25px;
    padding: 20px;
    grid-column: 1/2;

}

.box7 img {
    width: 110px;
}

.box8 {
    background-color: yellow;
    height: 260px;
    width: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 25px;
    padding: 20px;
    transform: translateY(85px);
}

.box8 img {
    width: 110px;
}

@media only screen and (max-width:639px) {
    main {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
        margin-top: 20px;
    }

    .box1,
    .box2,
    .box3,
    .box4,
    .box5,
    .box6,
    .box7,
    .box8 {
        width: 350px;
        padding: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        height: auto;
    }

    .box8 {
        transform: translate(0px);
    }

    .box2 img {
        width: 300px;
    }
}