@media screen and (min-width:710px) {
    .welcome { 
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        padding: 0px;
        background-image: url("/assets/img/title__back.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;

    }

    
    .welcome__container {
        text-align: left;
        display: flex;
        flex-direction: column;
        height: 100%;
        gap: 16px;
        padding: 60px 160px 40px 160px;
        margin: 0 auto;
        max-width: 1200px;
        position: relative;
    }


    .welcome__title {
        font-family: "KoHo Bold";
        font-size: 65px;
        z-index: 199;
        width: 100vw;
        color: #fff;
        
        text-transform: uppercase
    }

    .welcome__title::before { 
        content: "";
        position: absolute;
        top: 0px;
        left: -50%;
        width: calc(100vw + 100%);
        height: 45vh;
        background: linear-gradient(to bottom, rgba(0,0,0,.85), rgba(0,0,0,0));
        z-index: -1;
    }

    .welcome__title::after { 
        content: "";
        position: absolute;
        bottom: 0px;
        left: -50%;
        width: calc(100vw + 100%);
        height: 30vh;
        background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0));
        z-index: -1;
    }

    .welcome__text {
        font-family: "KoHo Regular";
        font-size: 20px;
        color: #ffffff;
        z-index: 199;
        text-transform: uppercase
    }

    .welcome__text__sub { 
        font-size: 40px;
        margin-top: -20px;
    }

    .welcome__text__foot { 
        margin-top: auto;
        text-align: right;
    }

    .welcome__img-container {
        
        width: 100%;
        height: 260px;
        margin: 0 auto;
        border-radius: 20px;
        
    }
}


@media screen and (max-width:710px) {
    .welcome { 
        
        background-image: url("/assets/img/title__back.jpg");
        
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
    
    .welcome__container {
        text-align: left;
        height: 100vh;
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 120px 40px calc(60px - 0.5em) 40px;
        position: relative;
        margin: 0;
    }


    .welcome__title {
        font-family: "KoHo Bold";
        font-size: 40px;
        z-index: 199;
        width: 100vw;
        color: #fff;
        text-transform: uppercase;
    }

    .welcome__title::before { 
        content: "";
        position: absolute;
        top: 0px;
        left: -50vw;
        width: calc(100vw + 50vw);
        height: 50vh;
        background: linear-gradient(to bottom, rgba(0,0,0,.85), rgba(0,0,0,0));
        z-index: -1;
    }

    .welcome__title::after { 
        content: "";
        position: absolute;
        bottom: 0px;
        left: -50%;
        width: calc(100vw + 50%);
        height: 50vh;
        background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0));
        z-index: -1;
    }

    .welcome__text {
        font-family: "KoHo Regular";
        font-size: 20px;
        color: #ffffff;
        z-index: 199;
        text-transform: uppercase
    }
    
    .welcome__text__sub { 
        margin-top: -10px;
    }

    .welcome__text__foot { 
        margin-top: auto;
        text-align: right;
        width: 100%;
    }

    .welcome__img-container {
        background-color: #D9D9D9;
        width: 100%;
        height: 260px;
        margin: 0 auto;
        border-radius: 20px;
    }
}