@import "../../bootstrap/variables";

.features-4x-section {


    &__card-item {
        top: 0;
        width: 100%;
        height: 275px;

        // used for each col
        &-1 {
            //margin-top: -24px;
        }

        &-2 {
            margin-top: 24px;
        }

        &-3 {
            margin-top: 8px;
        }

        &-4 {
            margin-top: 32px;
        }

        &, &-mask {
            transition: all 0.3s ease;
        }

        &-mask {
            position: absolute;
            inset: 8px;
            bottom: -8px;
            border-radius: 24px;
            opacity: 0.5;
            background-color: var(--white);
            z-index: 1;
        }

        &:hover {
            top: -8px;

            .features-4x-section__card-item-mask {
                bottom: 8px;
                top: -8px;
            }
        }

        @media (max-width: $screen-sm-max) {
            &-2, &-3, &-4 {
                margin-top: 24px;
            }
        }
    }
}