@media screen and (max-width: 1401px) {
    .container {
        grid-template-columns: repeat(4, auto);
    }
}

@media screen and (max-width: 1121px) {
    .card {
        width: 220px;
    }
    .content-card {
        padding: 0 10px;
    }
}

@media screen and (max-width: 1024px) {
    header {
        aspect-ratio: 16/9;
    }
}

@media screen and (max-width: 961px) {
    .card {
        width: 200px;
    }
}

@media screen and (max-width: 901px) {
    .container {
        grid-template-columns: repeat(3, auto);
    }
}

@media screen and (max-width: 661px) {
    .card {
        width: 180px;
    }
    .content-card {
        padding: 10px;
    }
    .content-card button::before {
        content: 'More';
    }
    .content-card button span {
        display: none;
    }
}

@media screen and (max-width: 601px) {
    .container {
        grid-template-columns: repeat(2, auto);
    }
}

@media screen and (max-width: 501px) {
    .banner-text h1 {
        font-size: 3rem !important;
    }
    .box-rb {
        font-size: 1.4rem !important;
    }
    .txt-container h1 {
        font-size: 2.25rem !important;
    }
    .content-card strong {
        font-size: 1rem !important;
    }
    .section-btn button {
        width: 6rem !important;
        font-size: 1.25rem !important;
    }
}

@media screen and (max-width: 481px) {
    header {
        background-attachment: local;
    }
    .btn-container {
        padding-left: 0 !important;
    }
    .txt-container {
        padding-left: 1.5rem !important;
    }
    .txt-container h1 {
        height: 5rem;
    }
}

@media screen and (max-width: 426px) {
    .container {
        gap: 0.5em;
    }
    .card {
        width: 160px;
    }
    .content-card button {
        padding: 0.1rem 0.5rem;
        display: flex;
        position: absolute;
        bottom: 10px;
        right: 10px;
    }
    div.next-btn-container {
        gap: 0.5rem;
        transform: scale(0.9);
    }
}