3-column preview card component

Nice well done. The page is not responsive, here are a few things you can do to fix your page.

• Make it a habit of using min-height: 100vh; this will make a page responsive to its content.
• I've made a change in your media query. Everything that's commented out you can delete.
• You don't need to add width on the body. By default the width of the body is always 100%.

body {
    background-color: #E4D282;
/*     width: 100%; */ /* delete this line */
    min-height: 100vh; /* add this line */
    font-family: 'Lexend Deca', sans-serif;
    display: grid; /* add this line, its needed to place the card in the middle of the page */
    place-items: center; /* add this line to place the content in the middle of the page */
    padding: 40px 0; /* add this line to create a space between content and body */
}

@media screen and (max-width: 870px){
     .row{
       flex-direction: column; /* add this line to change the direction of flexbox, to make the page responsive */
    }
/* everything below can be removed */
/*    
    .row__col1{
        border-top-right-radius: 8px;
        border-bottom-left-radius: 0px;
        width: 120%;
        margin-left:-10%;
    }
    .row__col2{
        width: 120%;
        margin-left: -10%;
    }
    .row__col3{
        border-top-right-radius: 0px;
        border-bottom-left-radius: 8px;
        width: 120%;
        margin-left: -10%;
    }
    .btn{
        margin-top: 20%;
    } */
}