@import './globals.scss';

.ImageBox{
    display: block;
    width: 100vw;
    position: relative;
    box-sizing: border-box;
    padding: 5px 10px;
    margin: 0 auto;

    // Make it responsive automatically
    height: 0;
    padding-bottom: 40vw;
    max-width: 90vw;

    .wrapper{
        position: relative;
    }

    .data-box,
    .data-image{
        position: absolute;
        left:0;
        top:0;
        width: 100%;
        z-index: 3;
    }

    .wrapper-box{
        position: absolute;
    }

    // Gray background box
    .wrapper-data{
        box-sizing: border-box;
        padding: 5px 10px;
        left: 0;
        top: 15px;
        width: 60%;
        z-index: 1;
        background-color: rgba(218,221,225,.8);
        // Make it responsive automatically
        height: 0;
        padding-bottom: 40%;
    }

    // Image box
    .wrapper-image{
        right: 0;
        top: 0;
        width: 60%;
        z-index: 2;
    }

    img{
        max-width: 100%;
        max-height: 100%;
    }

    // Main data box
    .main-data{
        left: 15%;
        top: 27px;
        width: 50%;
        z-index: 4;
        background-color: $white;
        // Make it responsive automatically
        height: 0;
        padding-bottom: 28%;
    }

    // Direction left
    .wrapper.left{
        
        .main-data{
            left: 20%;
        }

        .wrapper-data{
            left: auto;
            right: 0;
            top: 0;
            width: 60%;
        }

        .wrapper-image{
            left: 0;
            top: 10%;
            width: 60%;
        }
    }

    @media screen and (min-width: 550px) {
        .main-data{
            top: 45px;
        }
    }

    @media screen and (min-width: 768px) {
        .wrapper-data{
            top: 30px;
        }
        .main-data{
            top: 6vw;
        }
    }
}