/* Mobile first */
@media (max-width: 768px) {
    .container {
        padding: 0 8px;
    }
    section, footer {
        margin-bottom: 32px;
        overflow-x: hidden;
    }
    .grid-3 {
        grid-template-columns: 1fr;
    }
    .card {
        padding: var(--spacing-2);
    }
    .btn {
        width: 100%;
        text-align: center;
        padding: var(--spacing-2);
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        padding: 0 16px;
    }
    .grid-3 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1025px) {
    .container {
        padding: 0 32px;
    }
    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}