/* CSS for medium (>= 768px) screens */

@media (min-width: 768px) {
    main > div > div {
        padding: 0 5%;
    }

    .qualifications {
        padding: 0 5%;
    }

    /* Navbar: Add borders */
    .navbar li {
        border-left: 1px solid var(--border-color);
    }
    .navbar li:last-of-type {
        border-right: 1px solid #dee2e6;
    }

    /* Qualifications: Add border and more padding */
    .qualification-box {
        padding: 60px 20px;
        border: 2px solid var(--border-color);
        border-radius: 6px;
    }

    /* Certifications: Display 2 certs per line */
    .certifications {
        display: grid;
        grid-template-areas:
            "h2     h2   h2"
            "cert-1 v-line cert-2"
            "h-line h-line h-line"
            "cert-3 .      .";
        grid-template-columns: 1fr auto 1fr;
        grid-template-rows: 1fr auto 1fr;
    }
    .certification-grid-vertical-line {
        margin: 0 10px;
        background-color: #f26f1b;
        width: 1px;
        grid-area: v-line;
        justify-self: center;
    }
    .certifications img {
        object-fit: cover; /* Makes the image looks good on some small medium screens */
    }
    .certifications h2 {
        grid-area: h2;
    }
    .cert-1 {
        grid-area: cert-1;
    }
    .cert-2 {
        grid-area: cert-2;
    }
    .cert-3 {
        grid-area: cert-3;
    }

    /* Projects: Display multiple projects per row on bigger screens */
    .projects {
        --repeat: auto-fit;
    }
    @media (min-width: 1675px) {
        .projects {
            --repeat: 3; /* https://stackoverflow.com/questions/54907270/how-to-specify-the-maximum-number-of-columns-repeat-will-create-using-auto-fit */
        }
    }
    .projects {
        margin: 40px auto; /* Centers the projects inside the parent container */
        display: grid;
        grid-template-columns: repeat(var(--repeat), minmax(300px, 1fr));
        gap: 20px;
    }
    .project-container {
        margin-top: 0px;
    }
}