.intro .headers {
    margin-bottom: var(--regular-half);
}

.intro .headers h1,
.intro .headers h2 {
    margin-bottom: 0;
}

.intro .headers .subheader {
    font-size: var(--regular-between);
}

.intro .route {
    align-items: center;
    display: flex;
    justify-content: center;
}

.intro .route .info,
.intro .route .order {
    margin: 0 var(--regular);
}

.intro .photo img {
    max-width: 100%;
}

/* Tripple layout */
.tripple {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: var(--regular-half) 0 0;
}

.double:last-of-type,
.tripple:last-of-type {
    padding: var(--regular-half) 0;
}

.tripple div.intro {
    display: flex;
    flex-direction: column;
    height: calc((100vw / 3) - var(--double));
    padding: var(--triple-half) var(--double);
    width: calc((100vw / 3) - var(--double));
}

.tripple div.intro a {
    color: black;
}

.tripple div.intro .headers {
    margin-bottom: 0;
}

.tripple div.intro h2 {
    font-size: var(--regular-half);
}

/* Double layout */
.double {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: var(--regular-half) 0 0;
}

.double div.intro {
    display: flex;
    flex-direction: column;
    height: calc((100vw / 2) - var(--double));
    padding: var(--five-half) var(--double);
    width: calc((100vw / 2) - 36px);
}

.double div.intro a {
    color: black;
}

.double div.intro .headers {
    margin-bottom: 0;
}

.double div.intro h2 {
    font-size: var(--double-half);
}

/* Single layout */
.single {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.single div.intro {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: calc(55vw - var(--double));
    padding: var(--five-half) var(--double);
    width: 100vw;
}

/* White links colors */
.white-links div.intro a {
    color: white
}

.white-links div.intro a:hover {
    color: var(--logispak-orange);
    transition: all var(--transition) ease-in-out;
}

.white-links div.intro .order a {
    background-color: white;
    color: black;
    border-radius: var(--radius-button);
    display: inline-block;
    padding: var(--thin) var(--regular);
    text-decoration: none;
}

.white-links div.intro .order a:hover {
    background-color: var(--logispak-orange);
    color: white;
}

/* Red links colors */
.red-links div.intro a {
    color: var(--logispak-red-dark);
}

.red-links div.intro a:hover {
    color: black;
    transition: all var(--transition) ease-in-out;
}

.red-links div.intro .order a {
    background-color: var(--logispak-red-dark);
    color: white;
    border-radius: var(--radius-button);
    display: inline-block;
    padding: var(--thin) var(--regular);
    text-decoration: none;
}

.red-links div.intro .order a:hover {
    background-color: black;
    color: white;
}

/* Blue links colors */
.blue-links div.intro h1,
.blue-links div.intro h2,
.blue-links div.intro a {
    color: var(--logispak-blue-dark);
}

.blue-links div.intro a:hover {
    color: black;
    transition: all var(--transition) ease-in-out;
}

.blue-links div.intro .order a {
    background-color: var(--logispak-blue-dark);
    color: white;
    border-radius: var(--radius-button);
    display: inline-block;
    padding: .25rem var(--regular-half);
    text-decoration: none;
}

.blue-links div.intro .order a:hover {
    background-color: black;
}

/* Orange links colors */
.orange-links div.intro a {
    color: var(--logispak-orange);
}

.orange-links div.intro a:hover {
    color: black;
    transition: all var(--transition) ease-in-out;
}

.orange-links div.intro .order a {
    background-color: var(--logispak-orange);
    color: white;
    border-radius: var(--radius-button);
    display: inline-block;
    padding: .25rem var(--regular-half);
    text-decoration: none;
}

.orange-links div.intro .order a:hover {
    background-color: black;
}

.bg-white {
    background-color: white;
    color: black;
}

.bg-blue {
    background-color: var(--logispak-blue-dark);
    color: white;
}

.bg-black {
    background-color: black;
    color: white;
}

.bg-white, .bg-blue, .bg-black {
    background-position: bottom;
    background-size: cover;
}


@media (max-width: 1440px) {
    article.landing-page .black-white-cols .flex,
    article.landing-page .white-blue-cols .flex {
        width: 100%;
    }
}

@media (max-width: 1024px) {
    .single div.intro {
        height: calc(70vw - var(--double));
    }

    .double div.intro,
    .tripple div.intro {
        padding: var(--double-half) var(--double);
    }
}

@media (max-width: 820px) {
    .single div.intro {
        height: 100vh;
        padding: var(--quadruple-half) var(--double);
    }

    .double,
    .tripple {
        flex-direction: column;
        padding: 0;
    }

    .double div.intro,
    .tripple div.intro {
        height: calc(90vh - var(--double));
        margin-top:0;
        padding: var(--triple-half) var(--double);
        width: 100vw;
    }

    .bg-white, .bg-blue, .bg-black {
        background-position: center;
    }

    .double div.intro h2,
    .tripple div.intro h2 {
        font-size: var(--double);
    }
}

@media (max-width: 768px) {
    .tripple:last-of-type {
        padding: 0;
    }
}

@media (max-width: 560px) {
    .intro .headers {
        margin-bottom: var(--half);
    }

    .intro .route {
        margin-bottom: var(--double-half);
    }

    article.landing-page .black-white-cols .flex {
        flex-direction: column-reverse;
    }

    article.landing-page .black-white-cols .intro {
        margin-top: 0;
    }

    article.landing-page .white-blue-cols .flex {
        flex-direction: column;
    }

    article.landing-page .black-white-cols .intro,
    article.landing-page .black-white-cols .photo,
    article.landing-page .white-blue-cols .intro,
    article.landing-page .white-blue-cols .photo {
        width: 100%;
    }

    .double div.intro,
    .tripple div.intro {
        padding: var(--triple-half) var(--double);
    }
}