@use '../../root' as *;
@use '../../utilities' as *;

.project2 {  
    &__thumb {
       border-radius: 10px;
       img {
        border-radius: 10px;
        @include breakpoint (max-xxl){
            width: 100%;
        }
        @include breakpoint (max-xl){
            aspect-ratio: 1/1.297;
        }
        @include breakpoint (max-lg){
            aspect-ratio: 1;
        }
       }
    }
    &-card {
        position: relative;
        border-radius: 10px;
        background: $bg-color;
        padding: 70px 74px;
        @include breakpoint (max-xxl){
            padding: 49px 53px;
        }
        @include breakpoint (max-xl){
            padding: 50px 53px;
        }
        @include breakpoint (max-md){
            padding: 30px 30px;
        }
        &__shape {
            position: absolute;
            bottom: 0;
            right: 0;
            @include breakpoint (max-md){
                display: none;
            }
        }
        &__title {
            color: $title-color;
            text-align: center;
            font-family: $body-font;
            font-size: 30px;
            font-style: normal;
            font-weight: 700;
            line-height: 36px; 
            padding-bottom: 30px;
        }
        &__desc {
            color: $title-color;
            text-align: center;
            font-family: $body-font;
            font-size: 20px;
            font-style: normal;
            font-weight: 400;
            line-height: 40px; /* 200% */
            opacity: 0.7;
            @include breakpoint (max-sm){
                font-size: 16px;
                line-height: 33px;
            }
        }
        &-arrow {
            padding-top: 57px;
            display: flex;
            gap: 10px;
            justify-content: center;
        }
    }
}
