*{
    box-sizing: border-box;
}
body{
    background-color: lightblue;
}
img{
    max-width: 100%;
}

.container{
    max-width: 1100px;
    margin: 20px auto;
}
header, .left, .center, .right, footer{
    border: 1px, solid;
    padding: 20px;
}

header, footer{
    text-align: center;
}

header{
    margin-bottom: 10px;
}

footer{
    margin-top: 10px;
}

.center{
    width: 50%;
}

.left, .right{
    width: 25%;
}
main{
    display: flex;
    gap: 10px;
}
/* tablet */
@media screen and (max-width: 900px) {
    body{
        background-color: lavender;
    }
    main{
        flex-wrap: wrap;
    }
    .left{
        width: 100%;
    }
    .center,.right{
        width: calc(50% - 5px);
    }
}
/* phone */
@media screen and (max-width: 600px) {
    body{
        background-color: lightgoldenrodyellow;
    }
    .center,.right{
        width:100%;
    }
}