@use '../../utils' as *;

/*----------------------------------------*/
/*  7.1 Choose css start
/*----------------------------------------*/

.mtchoose {
    @media #{ $md, $xs} {
            padding-left: 0px;
        }
    &__thumb {
        position: absolute;
        left: 40px;
        top: 0;

        @media #{$xxl, $xl,} {
            left: 0px;
            top: 7%;
        }
        @media #{ $lg} {
            position: static;
            margin-left: 10px;
            margin-right: 10px;
            margin-bottom: 30px;
        }
        @media #{ $md, $xs} {
            position: static;
            margin-bottom: 30px;
        }

        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;

            @media #{$xxl} {
                width: 664px;
                height: inherit;
            }
            @media #{$xl} {
                width: 570px;
                height: inherit;
            }
        }
    }

    &__box {
        &-wrap{
            @media #{ $md, $xs} {
            flex-wrap: wrap;
        }
        }
        &-icon {
            & span {
                width: 60px;
                height: 60px;
                line-height: 60px;
                background-color: rgba(255, 255, 255, 0.2);
                display: inline-block;
                border-radius: 50px;
                text-align: center;
                font-size: 32px;
                color: var(--mt-common-white);
            }
        }

        &-title {
            font-size: 24px;
            color: var(--mt-common-white);
        }
    }
}