/* Mobile Styles (up to 640px) */
@media (max-width: 640px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    h1.text-4xl {
        font-size: 1.875rem;
    }

    .py-16 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .space-y-4 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 0.75rem;
    }
}

/* Tablet Styles (641px to 768px) */
@media (min-width: 641px) and (max-width: 768px) {
    h1.text-4xl {
        font-size: 2.25rem;
    }
    
    .py-16 {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

/* Small Desktop Styles (769px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        max-width: 90%;
    }
}

/* Large Desktop Styles (1025px and up) */
@media (min-width: 1025px) {
    .container {
        max-width: 1200px;
    }
    
    .max-w-3xl {
        max-width: 48rem;
    }
    
    .max-w-5xl {
        max-width: 64rem;
    }
}