@media screen and (max-width: 1214px) {
    
    .slide-text {
        bottom: 60px;
        left: 30px;
    }

}

@media screen and (max-width: 1024px) {

    :root {
        --navbarHeight: 150px;
        --navbarVPadding: 15px;
    }

    .navbar .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .slide-text {
        width: calc(100vw - 60px);
    }

    .slide-text .image-title {
        padding-bottom: 0.4em;
    }

    .image-link {
        font-size: 0.8rem;
    }

    body:not(.frontpage) .content-area {
        display: flex;
        flex-direction: column-reverse;
        align-items: stretch;
        justify-content: stretch;
    }

    body:not(.frontpage) #quote .container {
        margin-top: 1rem;
        padding-top: 1.5rem;
    }

    body:not(.frontpage) .name-field-image {
        float: none;
        max-width: 100%;
        min-width: 0px;
        margin: 30px 0 0 0;
        width: 100%;
    }
    body:not(.frontpage) .name-field-image > * {
        display: block;
        max-width: 640px;
        margin: 0 auto;
    }

}

@media screen and (max-width: 836px) {

    .columns:not(#products .columns, #contact .columns) {
        display: block !important;
    }

}

@media screen and (max-width: 768px) {

    .frontpage #page > .section {
        padding-top: 1.5rem;
    }

    #contact > .container, 
    #products > .container, 
    .title-area,
    .name-field-preface {
        margin-left: -1.5rem;
        margin-right: -1.5rem;
        width: auto;
    }

    .slide-text .image-title {
        font-size: max(2em, 2vw);
        text-align: center;
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }

    #products .butterfly {
        left: 5%;
    }

    #products h3 {
        margin-bottom: 15px;
    }

    .quote {
        font-size: max(2em, 1vw);
    }

}

@media screen and (max-width: 560px) {

    .title-area {
        padding-bottom: 34%;
    }
    .page-title h1 {
        font-size: max(2em, 1vw);
    }

    #contact .columns:not(#footer-logos) {
        display: block;
    }

    #footer-logos img {
        max-width: 43vw;
    }

    .photoswipe-gallery {
        gap: 0.1rem;
    }
    .photoswipe-gallery > div {
        flex-basis: calc(33% - 0.1rem);
    }

}