/* Scholarly Journey - Responsive Styles */

@media (max-width: 1024px) {
    .footer-content {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 3rem !important;
    }

    .experience-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .intro-grid,
    .collage-grid {
        gap: 2rem !important;
    }

    .gallery-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1.5rem !important;
    }
}

@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr !important;
        gap: 2.5rem !important;
        text-align: center !important;
    }

    .contact-item,
    .social-links {
        justify-content: center !important;
    }

    .album-grid {
        max-width: 300px !important;
        margin: 0 auto !important;
    }

    .footer-logo-box img {
        height: 70px !important;
    }

    .page-header {
        height: 180px !important;
        padding-bottom: 2rem !important;
    }

    .page-header h1 {
        font-size: 2rem !important;
    }

    .intro-grid,
    .collage-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .intro-text {
        text-align: center !important;
    }

    .intro-text h2 {
        font-size: 1.8rem !important;
    }

    .experience-grid,
    .gallery-grid {
        grid-template-columns: 1fr !important;
    }

    .gallery-grid {
        max-width: 500px;
        margin: 0 auto;
    }

    .journey-section {
        padding: 4rem 1.5rem !important;
    }

    .intro-text-box {
        padding: 1.5rem !important;
        border-radius: 15px !important;
    }

    .feature-mini-box {
        text-align: left !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }

    .dynamic-banner h2 {
        font-size: 1.4rem !important;
    }

    .collage-grid {
        grid-template-columns: 1fr !important;
    }

    .collage-text {
        order: 2;
    }

    .image-collage {
        order: 1;
        min-height: 350px;
    }
}