scss-library/components/01_Layouts/contentCrop/_contentCrop.scss

@mixin RV-ContentCrop--bottom {
    img {
        object-position: bottom;
    }
}

@mixin RV-ContentCrop--top {
    img {
        object-position: top;
    }
}

@mixin RV-ContentCrop--right {
    img {
        object-position: right;
    }
}

@mixin RV-ContentCrop--left {
    img {
        object-position: left;
    }
}

@mixin RV-ContentCrop--center {
    img {
        object-position: center;
    }
}

@mixin RV-ContentCrop__Text--fade($-background-color: white) {
    &--fade {
        &:after {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0), #{$-background-color});
            display: block;
            content: ' ';
            opacity: 0.8;
            position: relative;
            top: -25%;
            width: 100%;
            height: 25%;
            z-index: -10;
        }
    }
}

@mixin RV-ContentCrop__Text--ellipsis($-background-color: white) {
    &--ellipsis {
        &:after {
            position: relative;
            display: block;
            bottom: 1.2em;
            left: calc(100% - 3ch);
            content: '...';
            font-size: 1.2em;
            min-width: 2em;
            background-color: $-background-color;
            padding: 0 2px;
        }
    }
}

@mixin RV-ContentCrop__Text($-line-height: 1.1, $-background-color: white) {

    p {
        overflow: hidden;
        display: block;
        text-overflow: ellipsis;
        padding: 0;
        margin: 0;
        line-height: #{$-line-height};
        // Determining the max line count and caclulating the height
        z-index: -20;
        position: relative;
        background-color: #{$-background-color};
        height: floor(100% / $-line-height / 16) * $-line-height * 16;
    }

    &--fade {
        @include RV-ContentCrop__Text--fade($-background-color);
    }

    &--ellipsis {
        @include RV-ContentCrop__Text--ellipsis($-background-color);
    }
}

@mixin RV-ContentCrop__Shapes--square {
    width: 100%;
    padding-top: 100%;
    position: relative;

    img,
    div {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }
}

@mixin RV-ContentCrop__Shapes--circle {
    @include RV-ContentCrop__Shapes--square;
    border-radius: 50%;
}

@mixin RV-ContentCrop__Shapes--xtoy($-x, $-y) {
    width: 100%;
    padding-top: 100% * ($-y / $-x);
    position: relative;

    img {
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }
}

@mixin RV-ContentCrop__Shapes {

    &--square {
        @include RV-ContentCrop__Shapes--square;
    }

    &--circle {
        @include RV_ContentCrop__Shapes--circle;
    }

    &--1to2 {
        @include RV-ContentCrop__Shapes--xtoy(1, 2);
    }

    &--2to1 {
        @include RV-ContentCrop__Shapes--xtoy(2, 1);
    }

    &--4to3 {
        @include RV-ContentCrop__Shapes--xtoy(4, 3);
    }

    &--16to9 {
        @include RV-ContentCrop__Shapes--xtoy(16, 9);
    }

    &--3to2 {
        @include RV-ContentCrop__Shapes--xtoy(3, 2);
    }
}

@mixin RV-ContentCrop__Image {
    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

}

@mixin RV-ContentCrop($-line-height: 1.1, $-prefix: '&') {

    // Heuristic, just to be safe
    $-line-height: $-line-height * 1.1;
    $-background-color: white;
    display: block;
    overflow: hidden;

    @include RV-ContentCrop__Image;
    @include RV-ContentCrop__Text($-line-height);

    @include RV-ContentCrop__Shapes;

    &--left {
        @include RV-ContentCrop--left;
    }

    &--center {
        @include RV-ContentCrop--center;
    }

    &--top {
        @include RV-ContentCrop--top;
    }

    &--bottom {
        @include RV-ContentCrop--bottom;
    }

    &--center {
        @include RV-ContentCrop--center;
    }
}

.RV-ContentCrop {
    @include RV-ContentCrop;
}