@import "main.css";

/* big slide layout */
.mss-slide2-add {
    height: 100%;
}

.mss-slide3-add {
    width: 220vw;
    justify-content: space-evenly;
    padding-left: 5vw;
    height: 100%;
    padding-right: 5vw;
}

/* slide 1 */
.mss-logo-img  {
    width: 50%;
}

/* intro slide*/
.mss-bk-dark-add{
    width: 25%;
}

.mss-slant-bottle-wrap {
    width:20%;
    height:100%;

}

.mss-mid-body-add {
    width: 90%;
    margin-right: 10%;
}

.mss-img-set-add {
    width: 25%;
}

.mss-head-add {
    display: flex;
    align-items: center;
    
}

.mss-mid-txt-add {
    width: 40%;
    margin-left: 1vw;
}

/* content slide  */
.mss-acc {
    color: var(--accent-color);
}

.mss-4im-set-wrap {
    height: 80%;
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.mss-4im-im {
    width: 20vw;
    padding: 2px;
}

.mss-head {
    height: 60%;
    font-size: 4em;
    width: 20vw;
    margin-left:3vw;
    margin-right: 3vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

@media (max-width: 600px) and (orientation: portrait) {
    .mss-slide2-add {
        height: calc(1.8*var(--fix-mob-height));
    }
    
    .mss-slide3-add {
        width: 100vw;
        height: calc(3*var(--fix-mob-height));
        justify-content: space-evenly;
        padding-left: 5vw;
        padding-right: 5vw;
    }

    .mss-slant-bottle-wrap {
        display: none;
    }
    
    .mss-mid-body-add {
        width: 90%;
        margin-right: 0%;
    }
    
    .mss-img-set-add {
        width: 95%;
    }
    
    .mss-mid-txt-add {
        margin-left: 0vw;
    }
    
    /* ------------------------------------------- */
    
    .mss-4im-set-wrap {
        height: auto;
    }
    
    .mss-4im-im {
        width: 45vw;
        padding: 3px;
    }
    
    .mss-head {
        height: auto;
        font-size: 3.5em;
        width: 90vw;
        margin-left: 10vw;
        margin-right: 3vw;
    }


}