/* Media Queries using CSS Variables */
@media (max-width: calc(var(--viewport-width))) {
    .tablet .navbar-menu {
        flex-direction: column;
    }
    .tablet .navbar-menu li {
        margin: 0;
    }
    .tablet .navbar-menu li a {
        padding: 10px;
    }

    .tablet header, .tablet main, .tablet footer {
        font-size: 14px;
    }

    .tablet .hero-section h1 {
        font-size: 2em;
    }
    .tablet .hero-section p {
        font-size: 1em;
    }
    .tablet .imageLine {
        flex-direction: column;
    }
    .tablet .image-container,
    .tablet .image-description {
        max-width: 100%;
    }
    .tablet .image-description {
        padding-left: 0;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .mobile .navbar-menu {
        flex-direction: column;
    }
    .mobile .navbar-menu li {
        margin: 0;
    }
    .mobile .navbar-menu li a {
        padding: 10px;
    }

    .mobile header, .mobile main, .mobile footer {
        font-size: 12px;
    }

    .mobile .hero-section h1 {
        font-size: 1.5em;
    }
    .mobile .hero-section p {
        font-size: 0.9em;
    }
    .mobile .imageLine {
        flex-direction: column;
        padding: 0.5em;
    }
    .mobile .image-container,
    .mobile .image-description {
        max-width: 100%;
    }
    .mobile .image-description h2 {
        font-size: 1.2em;
    }
    .mobile .image-description p {
        font-size: 0.9em;
    }
    .mobile .card {
        padding: 1em;
    }
    .mobile .card h2 {
        font-size: 1.2em;
    }
    .mobile .card p {
        font-size: 0.9em;
    }
    .mobile .card button {
        padding: 0.5em;
        font-size: 0.9em;
    }
}