RV-ContentCrop--bottom()
	+RV-Block__Modifier--name('bottom')
		.RV-Image *
			object-position bottom 
		
RV-ContentCrop--top()
	+RV-Block__Modifier--name('top')
		.RV-Image *
			object-position top

RV-ContentCrop--right()
	+RV-Block__Modifier--name('right')
		.RV-Image *
			object-position right

RV-ContentCrop--left()
	+RV-Block__Modifier--name('left')
		.RV-Image *
			object-position left
			
RV-ContentCrop--center()
	+RV-Block__Modifier--name('center')
		.RV-Image *
			object-position center

RV-ContentCrop--square()
	+RV-Block__Modifier--name('square')
		width 100%
		padding-top 100%
		position relative

		.RV-Image *,
		div
			position absolute
			top 0
			left 0
			bottom 0
			right 0
		
RV-ContentCrop--circle()
	+RV-Block__Modifier--name('circle')
		border-radius 50%
		width 100%
		padding-top 100%
		position relative

		.RV-Image *,
		div
			position absolute
			top 0
			left 0
			bottom 0
			right 0

RV-ContentCrop--XtoY(x=1, y=1)
	RV-CSSParameter({
		x: x,
		y: y
	})
	
	+RV-Block__Modifier--name('XtoY')
		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--1to2()
	+RV-Block__Modifier--name('1to2')
		RV-ContentCrop__XtoY(1, 2)

RV-ContentCrop--2to1()
	+RV-Block__Modifier--name('2to1')
		RV-ContentCrop__XtoY(2, 1)

RV-ContentCrop--4to3()
	+RV-Block__Modifier--name('4to3')
		RV-ContentCrop__XtoY(4, 3)

RV-ContentCrop--16to9()
	+RV-Block__Modifier--name('16to9')
		RV-ContentCrop__XtoY(16, 9)

RV-ContentCrop--3to2()
	+RV-Block__Modifier--name('3to2')
		RV-ContentCrop__XtoY(3, 2)

RV-ContentCrop__Text--fade(background-color=white)
	+RV-Element__Modifier--name('fade')
		&:after
			background-image linear-gradient(180deg, rgba(255, 255, 255, 0), background-color)
			display block
			content '###'
			color transparent
			opacity 1
			position relative
			top -30px
			width 100%
			height 30px
			z-index 10

RV-ContentCrop__Text--ellipsis(background-color=white)
	+RV-Element__Modifier--name('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


RV-ContentCrop(line-height=1.1, height=350px)
	background-color = white
	display block
	overflow hidden

	height calc_height()
	width calc_width()

	
	.RV-Image
		width 100%
		height 100%
		object-fit cover
		display block
		
	.RV-Text
		overflow hidden
		display block
		position relative
		text-overflow ellipsis
		background-color background-color
		
		line-height line-height
		max-height floor(height / (line-height * 16)) * (line-height * 16)
		
		padding 0
		margin 0


+RV-Block('RV-ContentCrop')
	RV-CSSParameter({
		
	})
	
	line-height = 1.1
	height = 350px
	
	RV-ContentCrop(line-height, height)
	
	+RV-Element()
		RV-ContentCrop__Image()
	
	+RV-Element()
		RV-ContentCrop__Text(line-height)
		
		+RV-Element__Modifier()
			RV-ContentCrop__Text--ellipsis()
			
		+RV-Element__Modifier()
			RV-ContentCrop__Text--fade()
	
	+RV-Block__Modifier()
		RV-ContentCrop--bottom()
		
	+RV-Block__Modifier()
		RV-ContentCrop--top()
	
	+RV-Block__Modifier()
		RV-ContentCrop--right()
	
	+RV-Block__Modifier()
		RV-ContentCrop--left()
	
	+RV-Block__Modifier()
		RV-ContentCrop--center()
	
	+RV-Block__Modifier()
		RV-ContentCrop--square()
		
	+RV-Block__Modifier()
		RV-ContentCrop--circle()
		
	+RV-Block__Modifier()
		RV-ContentCrop--1to2()
		
	+RV-Block__Modifier()
		RV-ContentCrop--2to1()
		
	+RV-Block__Modifier()
		RV-ContentCrop--4to3()
		
	+RV-Block__Modifier()
		RV-ContentCrop--16to9()
		
	+RV-Block__Modifier()
		RV-ContentCrop--3to2()