@use '../../abstract' as *;
/* ========== Component  : Portfolio Widget Style ============= */

.portfolio-widget {
    // height: 100%;

    &_image-block {
        margin-bottom: 24px;
        border-radius: 10px;
        overflow: hidden;
        height: 100%;

        img {
            height: 100%;
            width: 100%;
            object-fit: cover;
            object-position: center top;
            transition: all 0.4s;

            &:hover {

                transform: scale(1.1) rotate(3deg);
            }
        }
    }

    &__title {
        font-family: $font-family-base;
        color: $black;
        @include heading-24;

        a {
            color: inherit;

            &:hover {
                color: inherit;
            }
        }
    }

    &__title-block {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        flex-direction: column;
        row-gap: 10px;

        @media (min-width:576px) {
            row-gap: 20px;
            margin-bottom: 20px;
        }

        @media (min-width:992px) {
            flex-direction: initial;
            margin-bottom: 20px;
            column-gap: 20px;
        }
    }

    &__category {
        @include body-18;
        line-height: 1.67;
        color: #0A102F;
    }

    &:hover {
        .btn-link {
            // color: inherit;
            color: $primary;

            &:after {
                left: 10px;
            }
        }
    }

    &--overlay {
        position: relative;

        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: calc(100% - 24px);
            border-radius: 10px;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
            transition: opacity 0.3s ease-in-out;
            opacity: 0;
        }

        &:hover {
            &::before {
                opacity: 1;
            }

            .portfolio-widget__title-block {
                opacity: 1;
            }
        }

        .portfolio-widget__title-block {
            position: absolute;
            bottom: 0;
            width: 100%;
            padding: 40px;
            flex-direction: column;
            margin-bottom: initial;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;

            h3,
            span {
                color: #fff;
            }
        }
    }

    &--shadow {
        .portfolio-widget_image-block {
            transition: all .2s ease-in-out;
        }

        &:hover {

            .portfolio-widget_image-block {
                box-shadow: 10px 10px rgba($body-color-rgb);
                border-radius: 10px;
            }

        }
    }
}