@media (max-width: 1024px) {
    .promo-grid {
        grid-gap: 15px;
    }
    
    .header-decor {
        display: none !important;
    }
    
    .promo-highlight {
        font-size: 2.2rem;
    }
}

/* Mobile Breakpoint (Max 768px) */
@media (max-width: 768px) {
    .app-container {
        flex-direction: column;
    }

    /* Show mobile header */
    .mobile-header {
        display: flex;
    }

    /* Hide desktop slogan and header elements to save space */
    .desktop-header {
        margin-top: 10px;
        margin-bottom: 20px;
    }
    
    .slogan-badge {
        font-size: 0.8rem;
        padding: 4px 20px;
        text-align: center;
        margin-top: -15px;
    }

    .slogan-text {
        font-size: 0.9rem;
    }

    /* Convert sidebar into slide-in overlay */
    .sidebar {
        position: fixed;
        top: 0;
        left: -300px;
        bottom: 0;
        width: 250px;
        background-color: var(--sidebar-bg);
        transition: left 0.3s ease;
        box-shadow: 5px 0 15px rgba(0,0,0,0.5);
    }

    .sidebar.active {
        left: 0;
    }

    .sidebar-close {
        display: block; /* Show close button on mobile sidebar */
    }

    /* Convert grid to single column */
    .promo-grid {
        grid-template-columns: 1fr;
    }

    /* Adjust footer */
    .main-footer {
        left: 0;
    }
}

/* Small Mobile Breakpoint (Max 480px) */
@media (max-width: 480px) {
    .promo-highlight {
        font-size: 1.8rem;
    }
    
    .promo-title {
        font-size: 0.9rem;
    }
    
    .promo-card {
        min-height: 140px;
        padding: 15px;
    }
}