.hero-small {
    min-height: 45rem;
    position: relative;
    overflow: hidden;
    @media(min-width: $tabletSmallP1) {
        border-bottom: .2rem solid $secondary;
    }

    @media(min-width: $tabletSmallP1) {
        min-height: 55rem;
    }

    // .hero-small__image

    &__image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        &::before {
            content: '';
            width: 100%;
            height: 50%;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
            position: absolute;
            top: 0;
            left: 0;
        }

        &::after {
            content: '';
            width: 100%;
            height: 30%;
            background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
            position: absolute;
            bottom: 0;
            left: 0;

            @media (min-width: $tabletSmallP1) {
                display: none;
            }

        }

        img {
            width: 100%;
            height: 101%;
            object-fit: cover;
        }
    }
}