#mainNav {
    background-color: #FFF;
}

#mainNav .navbar-brand {
    color: #333;
    font-size: 0.8rem
}

#mainNav .navbar-nav .nav-item .nav-link {
    color: #333;
    font-weight: 900;
}

@media (min-width: 992px) {
    #mainNav .navbar-brand img {
        height: 3rem;
        transition: height 0.3s ease-in-out;
    }

    #mainNav .navbar-brand {
        font-size: 1.5rem
    }

    #mainNav.navbar-shrink {
        padding-top: 1rem;
        padding-bottom: 1rem;
        background-color: #FFF;
    }

    #mainNav.navbar-shrink .navbar-brand svg, #mainNav.navbar-shrink .navbar-brand img {
        height: 2rem;
    }
}


.page-section h2.section-heading, .page-section .section-heading.h2 {
    font-size: 1.2rem;
    margin-top: 0;
    margin-bottom: 1rem;
}

header.masthead .masthead-heading {
    font-size: 1.25rem;
}

@media (min-width: 600px) {
    .page-section h2.section-heading, .page-section .section-heading.h2 {
        font-size: 2.5rem;
    }

    header.masthead .masthead-heading {
        font-size: 2.25rem;
    }
}


@media (min-width: 992px) {
    .page-section h2.section-heading, .page-section .section-heading.h2 {
        font-size: 2.5rem;
    }

    header.masthead .masthead-heading {
        font-size: 3.25rem;
    }


}





#about .intro-img {
    padding: 10px;
}


#about .intro-img img {
    display: block;
    height: auto;
    max-width: 100%;
}


.gallery {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.2em;
    margin-top: calc(1.2em / 2);
}

.gallery > * {
    background-color: #999;
    background-image: var(--img-url);
    background-size: cover;
    background-position: center;
    flex-basis: 20em;
    min-height: 20em;
    flex-grow: 1;
    border-radius: calc(2rem / 2);
}


.img--001 {
    --img-url: url(/assets/img/portfolio/klim_01.jpg);
}

.img--l {
    flex-basis: 40em;
}

.img--002 {
    --img-url: url(/assets/img/portfolio/klim_02.jpg);
}

.img--003 {
    --img-url: url(/assets/img/portfolio/klim_03.jpg);
}

.img--004 {
    --img-url: url(/assets/img/portfolio/klim_04.jpg);
}

.img--005 {
    --img-url: url(/assets/img/portfolio/klim_05.jpg);
}

.img--006 {
    --img-url: url(/assets/img/portfolio/klim_06.jpg);
}

.color-accent {
    color: #f2b024;
}