RV-ContentCrop--bottom() .RV-Image * object-position bottom RV-ContentCrop--top() .RV-Image * object-position top RV-ContentCrop--right() .RV-Image * object-position right RV-ContentCrop--left() .RV-Image * object-position left RV-ContentCrop--center() .RV-Image * object-position center RV-ContentCrop__Text--fade(background-color=white) &:after background-image 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 RV-ContentCrop__Text--ellipsis(background-color=white) &: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 RV-ContentCrop__Text(line-height=1.1, background-color=white) .RV-Text overflow hidden display block text-overflow ellipsis // Determining the max line count and caclulating the height line-height line-height z-index -20 position relative background-color background-color max-height floor(100% / line-height / 16) * line-height * 16 padding 0 margin 0 * margin 0 padding-bottom line-height * 16px *:last-child padding-bottom unset &--fade RV-ContentCrop__Text--fade(background-color) &--ellipsis RV-ContentCrop__Text--ellipsis(background-color) RV-ContentCrop__Shapes--square() width 100% padding-top 100% position relative .RV-Image *, div position absolute top 0 left 0 bottom 0 right 0 RV_ContentCrop__Shapes--circle() RV-ContentCrop__Shapes--square() border-radius 50% RV-ContentCrop__Shapes--xtoy(-x, -y) width 100% padding-top 100% * (-y / -x) position relative .RV-Image * object-fit cover position absolute top 0 left 0 bottom 0 right 0 RV-ContentCrop__Shapes() &--square RV-ContentCrop__Shapes--square() &--circle RV_ContentCrop__Shapes--circle() &--1to2 RV-ContentCrop__Shapes--xtoy(1, 2) &--2to1 RV-ContentCrop__Shapes--xtoy(2, 1) &--4to3 RV-ContentCrop__Shapes--xtoy(4, 3) &--16to9 RV-ContentCrop__Shapes--xtoy(16, 9) &--3to2 RV-ContentCrop__Shapes--xtoy(3, 2) RV-ContentCrop__Image() .RV-Image *, .RV-Image width 100% height 100% object-fit cover display block 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 RV-ContentCrop__Image() RV-ContentCrop__Text(line-height) RV-ContentCrop__Shapes() &--left RV-ContentCrop--left() &--center RV-ContentCrop--center() &--top RV-ContentCrop--top() &--bottom RV-ContentCrop--bottom() &--center RV-ContentCrop--center() .RV-ContentCrop RV-ContentCrop()