.main-hero {
    min-height: 560px;
    position: relative;

    .container {
        z-index: 3;

        .info-section {
            max-width: 530px;
            min-height: 560px;
            padding-top: 30px;
            padding-right: 60px;
            box-sizing: border-box;
            position: absolute;
            left: 0;
            top: 0;
            p {
                text-align: justify;
            }
        }
        .leer-mas {
            margin-top:30px;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 1px;
            color: #ac7963;
            text-transform: uppercase;

            i {
                transition: all .5s;
            }

            &:hover {

                i {
                    margin-left: 10px;
                }
            }
        }
        .mouse {
            width: 22px;
            height: 32px;
            margin-top: 38px;
            display: block;
        }
    }
    .wrapper__img {
        width: 100%;
        max-width: 770px;
        position: absolute;
        right: 0;
        top: 0;
        height: 560px;
        overflow: hidden;
        @media(max-width: 900px) {
            height: 340px;
            position: relative;
        }
        .img-box-section {
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            box-shadow: 0 20px 40px 0 rgba(44, 48, 46, 0.1);
            z-index: 1;
            
            @media(min-width:$large_lapt) {
                max-width: 880px;
            }
        }
    }
}

@media (max-width:900px) {

    .main-hero {
        display: flex;
        flex-direction: column-reverse;
        .layer {
            @media(max-width: 900px) {
                background: transparent;
            }
        }
        .container {
            //height: 63vh;
            //max-height: 360px;
            //position: absolute !important;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            

            .info-section {
                min-height: 0;
                max-width: 90vw;
                position: relative;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                z-index: 1;
                margin: auto;
                background: #faf8f6;
                padding:43px 21px 21px;
                box-sizing: border-box;

                .leer-mas {
                    display: block;
                }

                @media(max-width: 325px) {
                    max-width: 95vw;
                    padding: 10px;
                }
            }
        }
    }
}