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

.who-we-are{
    .title{
        color: $tertiary;
    }
    .card-box{
        @media only screen and (min-width: 1200px){
            padding-top: 100px;
        }
    }
    .image-wrapper{
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            max-height: 300px;
            @media only screen and (min-width: 640px){
                max-height: 600px;
            }
            @media only screen and (min-width: 1200px){
                max-height: inherit;
                height: 490px;
            }
            @media only screen and (min-width: 1440px){
                height: 610px;
            }
        }
        @media only screen and (min-width: 1200px){
            top: 0;
            left: 0;
            z-index: -1;
        }
    }
    .content-wrapper{
        background: $LightCream;
        padding: 20px;
        h3{
            font-weight: 400;
            color: $primary;
            margin-bottom: 14px;
            @media only screen and (min-width: 1024px) {
                margin-bottom: 16px;
            }
        }
        .ck-data,p{
            margin-bottom: 14px;
            @media only screen and (min-width: 1024px) {
                margin-bottom: 16px;
            }
            &:last-child{
                margin: 0;
            }
        }
        @media only screen and (min-width: 640px){
            padding: 30px;
        }
        @media only screen and (min-width: 1024px){
            padding: 40px;
        }
        @media only screen and (min-width: 1200px){
            min-height: 450px;
        }
        @media only screen and (min-width: 1440px){
            min-height: 600px;
            padding: 60px;
        }
        // @media only screen and (min-width: 1600px){
        //     min-height: 710px;
        // }
    }
}