@import url('./heroCarrossel.css');
body {
    --grid-column: repeat(2, minmax(0, 300px));
    .container__hero {
        margin: 0 auto;
    }

    main {
        width: 100%;
        max-width: 1200px;
        margin: 32px auto;
        padding: 0 1rem;

        .container {
            &.sad {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 1rem;
                color: var(--gray);
    
                img {
                    opacity: .5;
                }
    
                p {
                    font-size: 3rem;
                }
            }
        }
        
        .container-cards {
            position: relative;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;

            .cards-wrapper {
                display: grid;
                grid-template-columns: var(--grid-column);
                justify-content: center;
                gap: 16px;
                padding: 0 !important;
                
                .card {
                    width: 100%;
                    min-width: 0;
                }
            }
        }
    }
}

@media (min-width: 400px) {
    body {
        --grid-column: repeat(2, minmax(0, 300px));
    }
}

@media (min-width: 576px) {

}

@media (min-width: 768px) {
    body {
        --grid-column: repeat(3, minmax(0, 300px));
    }
}

@media (min-width: 991px) {
    body {
        --grid-column: repeat(4, minmax(0, 260px));
    }
}