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

/*----------------------------------------*/
/*  7.14 History CSS
/*----------------------------------------*/

.#{$theme-prifix}-work{
    $self : &;
    &-section{
        &-title{
            font-weight: 500;
            font-size: 44px;
            line-height: 1.14;

            @media #{$xs}{
                font-size: 35px;
                & br{
                    display: none;
                }
            }
        }
    }
    &-item{
        border: 1px solid rgba($color: $black, $alpha: .1);
        padding: 70px 55px 65px;
        @extend %tp-transition;

        @media #{$xl}{
            padding-left: 30px;
            padding-right: 30px;
        }
        @media #{$lg}{
            padding-left: 15px;
            padding-right: 15px;
        }
        @media #{$sm}{
            padding-left: 20px;
            padding-right: 20px;
        }
        @media #{$xs}{
            padding-left: 10px;
            padding-right: 10px;
        }
        &:hover{
            border-color: var(--tp-theme-primary);

            #{$self}{
                &-icon{
                    & span{
                        color: var(--tp-theme-primary);
                    }
                }
            }
        }
    }
    &-title{
        font-size: 20px;
        font-weight: 400;
        line-height: 1.3;
    }
    &-icon{
        margin-bottom: 25px;
        height: 40px;
        & span{
            @extend %tp-transition;
        }
    }
    &-quote{
        & p{
            font-style: italic;
            font-weight: 400;
            font-size: 14px;
            line-height: 1.43;
            text-align: center;
            color: #818487;
            margin-bottom: 0;
            position: relative;
            padding-bottom: 5px;

            &::after{
                position: absolute;
                content: '';
                left: 50%;
                @include transform(translateX(-50%));
                bottom: 0;
                width: 100px;
                height: 1px;
                background-color: #E4E6E9;

            }
        }
    }
}