.hero-file,
.hero-module {
    display: grid;
    width: 100%;
    position: relative;
}

.hero-file {
    height: var(--tpl-hero-height);
    overflow: hidden;
}

.hero-file > *,
.hero-module > * {
    grid-area: 1 / 1;
}

.hero-module-bg {
    width: 100%;
    overflow: hidden;
}

.hero-module-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-module-bg .n2-ss-slider,
.hero-module-bg .n2-ss-slider-wrapper,
.hero-module-bg .n2-ss-section-main-content {
    width: 100% !important;
    height: 100% !important;
}

.hero-image {
    width: 100%;
    height: var(--tpl-hero-height);
    object-fit: cover;
    object-position: var(--tpl-hero-focus);
    display: flex;
    background-color: var(--tpl-background-color-content-outer);
}

.welcome {
    display: flex;
    flex-direction: column;
    align-self: center;         
    justify-self: var(--tpl-welcome-position);
    margin: var(--tpl-margin);
    max-width: var(--tpl-welcome-width);
    padding: var(--tpl-padding);
    border-radius: var(--tpl-border-radius);
    background-color: var(--tpl-background-color-welcome);
}

.welcome h1,
.welcome h2,
.welcome h3,
.welcome h4 {
    font-family: var(--tpl-font-welcome-heading), Verdana, sans-serif;
    color: var(--tpl-font-color-welcome-heading);
}

.welcome ul,
.welcome li,
.welcome p {
    padding: 0;
    text-decoration: none;
    list-style: none;
    margin: 0;
    font-family: var(--tpl-font-welcome-text), Verdana, sans-serif;
    color: var(--tpl-font-color-welcome-text);
}

.hero-both.hero-file {
    display: none;
}

.hero-both.hero-module {
    display: grid;
}

/*----------------------*/
/*--- Media Querries ---*/
/*----------------------*/

/* Source: https://www.w3schools.com/css/css_rwd_mediaqueries.asp */
@media (max-width: 1800px) {
    .hero-both.hero-module {
        display: none;
    }
    .hero-both.hero-file {
        display: grid;
    }
}

@media (max-width: 1600px) {
    .welcome ul,
    .welcome li,
    .welcome p {
        font-size: var(--tpl-mobile-text-font-size);
    }
}

@media (max-width: 1200px) {
    .hero-file {
        height: 60vh;
    }


    .hero-image {
        height: 60vh;
    }

    .welcome {
        max-height: 55vh;
        overflow: hidden;
    }

    .welcome::-webkit-scrollbar {
        display: none;                
    }
}

@media (max-width: 992px) {
    .welcome {
        justify-self: center;
        max-width: 80%;
    }
}

@media (min-width: 768px) {

}

@media (max-width: 600px) {
    .welcome {
        margin: var(--tpl-mobile-margin);
        font-size: 0.75em;
    }

    .welcome li,
    .welcome p,
    .welcome h1,
    .welcome h2,
    .welcome h3,
    .welcome h4 {
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
        scrollbar-width: none;       
        -ms-overflow-style: none;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}