@media (width > 540px) {
    .banner-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .banner-card:nth-child(1) {
        grid-area: 1/1/2/3;
    }

    .order-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (width > 768px) {
    nav {
        position: static;
        padding: 2rem 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    .nav-header {
        padding: 0;
        background-color: transparent;
    }

    .nav-logo img {
        max-width: 250px;
    }

    .nav-logo-dark {
        display: flex;
    }

    .nav-logo-white {
        display: none;
    }

    .nav-menu-btn {
        display: none;
    }

    .navlinks {
        position: static;
        padding: 0;
        flex-direction: row;
        justify-content: flex-end;
        background-color: transparent;
        transform: none;
        z-index: 1;
    }

    .navlinks a {
        color: var(--primary-color);
    }

    .navlinks a:hover {
        color: var(--tertiary-color);
    }

    .header-container {
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
    }

    .header-image {
        grid-area: 1/2/2/3;
    }

    .header-content h2 {
        margin-inline-start: unset;
    }

    .header-content h1 {
        text-align: left;
    }

    .banner-card {
        padding: 1.5rem;
    }

    .banner-card:nth-child(1) {
        grid-area: 1/1/3/2;
    }

    .order-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .event-content {
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
    }

    .event-image {
        grid-area: 1/2/2/3;
    }

    .event-details,
    .evennt-details .section-header {
        text-align: left;
    }

    .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-links li {
        justify-content: flex-end;
    }

    .footer-socials {
        justify-content: flex-end;
    }
}


@media (width > 1024px) {
    .order-grid {
        gap: 2rem;
    }
}