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

/*----------------------------------------*/
/*  7.3 Feature CSS
/*----------------------------------------*/

.#{$theme-prifix}-feature{
    $self5 : &;
    &-border-5{
        & .row{
            & [class*="col-"]{
                & #{$self5}{
                    &-item-5{
                        position: relative;
                        @media #{$xs}{
                            margin-bottom: 20px;
                        }
                        &::after{
                            position: absolute;
                            content: '';
                            right: 14px;
                            top: 42%;
                            width: 1px;
                            height: 50px;
                            background-color: #EAEBED;
                            @extend %translateY1_2;

                            @media #{$md, $sm, $xs}{
                                display: none;
                            }
                        }
                    }
                }
                &:nth-child(1),
                &:nth-child(2){
                    @media #{$md, $sm}{
                        margin-bottom: 20px;
                    }
                }
                &:last-child{
                    & #{$self5}{
                        &-item-5{
                            @media #{$xs}{
                                padding-bottom: 0;
                                margin-bottom: 0;
                            }
                            &::after{
                                display: none;
                            }
                        }
                    }
                }
            }
        }
    }
    &-inner-5{
        padding: 24px 43px;
        border: 2px solid #EAEBED;
        border-radius: 16px;
    }
    &-title-5{
        font-weight: 400;
        font-size: 18px;
        margin-bottom: 0;
    }
    &-icon-5{
        & span{
            font-size: 22px;
            color: var(--tp-theme-green);
            margin-right: 10px;
            & svg{
                @extend %tp-svg-y-2;
            }
        }
    }
}