:root {

    --tiny: max(1.7vw, 30px);
    --small: max(3vw, 50px);

    --vtiny: max(3vh, 30px);
    --vsmall: max(5vh, 50px);
    --vnormal: max(6.4vh, 70px);

    --content-gap: var(--small);

    --brand-main: rgb(25, 49, 83);
    --grey-light: #F0EFEB;

    --fs-normal: clamp(14px, 1.1vw, 16px);
    --lh-normal: 1.45;

    --fs-xnormal: clamp(16px, 1.4vw, 20px);
    --lh-xnormal: 1.4;

    --fs-medium: clamp(18px, 2vw, 24px);
    --lh-medium: 1.16;

    --fs-large: clamp(24px, 6vw, 60px);
    --lh-large: 1.1;

    --only-mobile: 600px;

}

p {

    margin: 0;

}

a {

    color: inherit;
    text-decoration: none;

}

.linkedin {

    align-self: start;

    display: inline-flex;

    padding: 12px 30px;
    background-color: var(--grey-light);

    font-size: var(--fs-xnormal);
    line-height: var(--lh-xnormal);

}

@media (any-hover: hover) {

    .linkedin,
    a {

        transition: 0.3s ease;

    }

    a:hover {

        color: var(--brand-main);

    }

    .linkedin:hover {

        background-color: var(--brand-main);
        color: white;

    }

}


body {

    padding: 0;
    margin: 0;

    background-color: #fff;

    min-height: max(600px, 100svh);

    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;

    font-size: var(--fs-normal);
    line-height: var(--lh-normal);
  
    overflow-x:hidden;

}

.teaser {

    display: grid;
    grid-template-rows: min-content 1fr;
    grid-template-columns: var(--small) 1fr;
    gap: var(--vtiny);

    min-height: max(600px, 100svh);

}

.teaser .--header {

    grid-column: 2;
    grid-row: 1;

    display: flex;
    justify-content: space-between; 
    gap: var(--content-gap); 

    padding-top: var(--vsmall); 
    padding-right: var(--small); 

}

.teaser .--header .wrapper {

    display: flex;
    gap: var(--content-gap); 

}

.teaser .--header .logo img {

    width: clamp(120px, 10vw, 250px);

}

.teaser .--header address {

    display: flex;
    gap: var(--content-gap); 

    margin-right: var(--vsmall);

    font-style: normal;
    font-weight: 500;

}

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

    .tablet-up {

        display: none;

    }

    .teaser .--header address {

        display: none;

    }

    .teaser .--main .overlay {

        padding-bottom: var(--vsmall);

        padding-right: 1em;

    }

}

.teaser .--header address a:not(.google-maps) {

    font-size: var(--fs-xnormal);
    line-height: var(--lh-xnormal);

    font-weight: initial;

} 

.teaser .--main {

    grid-column: 2;
    grid-row: 2;

    position: relative;

    display: grid;

    color: white;

    min-height: 0;
    overflow: hidden;

}

.teaser .--main > * {

    grid-column: 1;
    grid-row: 1;

}

.teaser .--main [class*=-wrapper] {

    position: relative;

    background-color: black;

    line-height: 0;

    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;


}

.teaser .--main [class*=-wrapper]::before {

    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--brand-main);
    opacity: 0.6;

}

.teaser .--main video {

    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;

}

.teaser .--main .overlay {
    
    position: relative;

    padding-left: var(--tiny);
    padding-top: var(--vtiny);
    padding-bottom: var(--vtiny);

    font-size: var(--fs-medium);
    line-height: var(--lh-medium);

    max-width: max(55%, 400px);

    z-index: 2;

}

.teaser .--main .overlay .--title {

    display: inline-block;

    margin: 0;
    margin-bottom: var(--vsmall);

    font-weight: 400;

    font-size: var(--fs-large);
    line-height: var(--lh-large);

}  

.teaser .--main .overlay .linkedin {

    margin-top: var(--vsmall);

    color: initial;

}

@media (any-hover: hover) {

    .teaser .--main .overlay .linkedin:hover {

        background-color: var(--brand-main);
        color: white;

    }

}