main .container{max-width: 1280px; margin:  0 auto; padding: 0 24px 80px 24px;}
header .container{max-width: 1280px; margin:  0 auto; padding: 0 24px 80px 24px;}
main .container .list-components {width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 2rem; box-sizing: border-box; } 

@media (max-width: 1280px) {
        main .container .list-components {
        grid-template-columns: repeat(3, 1fr); /*lo importante*/
        }
}

@media (max-width: 1080px) {
        main .container .list-components {
            grid-template-columns: repeat(2, 1fr); /*lo importante*/
        }
}

@media (max-width: 640px) {
        main .container .list-components {
            grid-template-columns: repeat(1, 1fr); /*lo importante*/
        }
}

.wrap-list {
        min-height: 80vh;
}

/* test */
button {
        border: 1px solid #0057FF;
        margin: 15px 0;
        border-radius: 5px;
        padding: 7px;
        cursor: pointer;
}