/* Process Card ---------------------------------- */
.process-card {
    &-wrap {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    padding: 30px;
    box-shadow: 0px 0px 20px rgba(186, 186, 186, 0.15);
    border-radius: 10px;
    background-color: $white-color;
    position: relative;
    z-index: 2;
    &_number {
        font-size: 24px;
        font-weight: 600;
        color: $white-color;
        background-color: $theme-color2;
        @include equal-size-lineHeight(46px);
        text-align: center;
        border-radius: 50%;
        margin-bottom: 25px;
    }
    &_img {
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: -1;
        > img {
            width: 115px;
            filter: brightness(0) invert(0);
            opacity: 0;
            transform: scale(0);
            transform-origin: bottom right;
            transition: 0.4s ease-in-out;
        }
    }
    .box-title {
        margin-bottom: 10px;
    }
    &_icon {
        position: absolute;
        top: 30px;
        right: 30px;
    }
    &_text {
        margin-bottom: -0.5em;
    }
    &:hover {
        .process-card {
            &_img {
                > img {
                    opacity: 0.03;
                    transform: scale(1);
                }
            }
        }
    }
}

@include sm {
    .process-card {
        &-wrap {
            grid-template-columns: repeat(1, 1fr);
        }
    }
}
