/* Desktop*/
@media (min-width: 1025px) {
    
    body {
        font-size: 1rem;
        height: 100vh;
        padding-top: 8%;
        padding-bottom: 1%;
        padding-left: 11%;
        padding-right: 11%;
        grid-auto-rows: auto 0;
    }

    .projects {
        max-width: 900px;
        min-width: 800px;
        min-height: 400px;
        max-height: 500px;
    }

    .project-card-container {
        margin: 0 auto;
        display: grid;
        height: 500px;
        min-width: 700px;
        max-width: 1000px;
        gap: .5rem;
        grid-template-columns:  1.5fr 2fr;
        grid-template-rows: 1.7fr 1fr .5fr; 
        grid-template-areas:
        "image-card image-card"
        "language-card description-card"
        "button description-card"
        ;
    }

    .navbar {
        margin: 0 auto;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        min-width: 100px;
        max-width: 400px;
        width: auto;
        height: auto;
        min-height: 20px;
        max-height: 59px;
        top: 4vh;
        border-radius: .9rem;
    }

    .carousel-dots {
        left: 66.5%;
        bottom: 2rem;
        gap: .5rem;
    }

    .navbar ul {
        font-size: 1rem;
        gap: 2.7rem;
    }
}

/* Tablet */
@media (min-width: 560px) and (max-width: 1024px) {
    :root {
        --body-padding: 8%;
    }

    body {
        padding-top: 15%;
    }

    .projects-carousel .projects{
        max-height: 800px;
        min-height: 700px;
        height: auto;
    }

    .project-card-container {
        flex: 0 0 100%;
        display: grid;
        max-height: 900px;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1.7fr 1.5fr .5fr 1fr;
        grid-template-areas:
        "image-card image-card"
        "language-card description-card"
        "button description-card"
        "navigation-space navigation-space"
        ;
    }

    .project-image {
        border-radius: 15px 15px 0 0;
    }

    .project-description {
        border-radius: 0 0 15px 0;
    }

    .project-button-link {
        border-radius: 0 0 0px 15px;
    }

    .navbar {
        left: 20%;
        right: 20%;
        bottom: 80px;
        height: 71px;
    }

    .carousel-dots {
        left: 71.5%;
        bottom: 12rem;
    }

    .navbar ul {
        font-size: 3vw;
        gap: 8vw;
    }
}