@import "../../style/variables.scss";

.unlock-app-wrapper{
    .inner-unlock-apps-wrapper{
        gap: 30px;
        flex-direction: column;
        @media only screen and (min-width: 991px){
           flex-direction: row;
        }
        @media only screen and (min-width: 1200px){
            gap: 50px;
        }
        @media only screen and (min-width: 1600px){
            gap: 82px;
        }
        .unlock-image-box{
            width: 41.66%;
            width: 100%;
            @media only screen and (min-width: 991px){
                width: 41.66%;
            }
            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
        .app-content{
            width: 100%;
            @media only screen and (min-width: 991px){
                width: 58.33%;
            }
            .title{
                font-family: 'Canto';
                font-weight: 400;
                color: $black25;
                text-transform: capitalize;
                padding-bottom: 20px;
                margin-bottom: 20px;
                border-bottom: 1px solid $primary;
                @media only screen and (min-width: 1200px){
                    padding-bottom: 25px;
                    margin-bottom: 30px;
                }
                @media only screen and (min-width: 1600px){
                    padding-bottom: 30px;
                    margin-bottom: 48px;
                }
                span{
                    color: $primary;
                }
                br{
                    display: none;
                    @media only screen and (min-width: 991px){
                        display: block;
                    }
                }
            }
            p{
                font-family: 'Avenir Next';
                color: $grey5E;    
                font-weight: 400;
            }
            .download-app-details{
                margin-top: 30px;
                @media only screen and (min-width: 1200px){
                    margin-top: 40px;
                }
                @media only screen and (min-width: 1600px){
                    margin-top: 60px;
                }
                .download-title{
                    font-family: 'Avenir Next';
                    font-weight: 600;
                    color: $black25;
                    margin-bottom: 21px;
                }
                a{
                    img{
                        max-width: 136px;
                        @media only screen and (min-width: 768px){
                            max-width: 140px;
                        }
                        @media only screen and (min-width: 1470px){
                            max-width: 100%;
                        }
                    }
                }
            }
        }
    }
}