scss-library/components/01_Layouts/fan/_fan.scss

@mixin RV-Fan--horizontal($-base_height, $-base_width, $-suffix: '') {
	
	&__Container#{$-suffix} {
		flex-direction: row;
	}

	&__Container#{$-suffix} &__Surface {
		min-width: $-base_width;
		height: $-base_height;
	}
}

@mixin RV-Fan--vertical($-base_height, $-base_width, $-suffix: '') {
	&__Container#{$-suffix} {
		flex-direction: column;
		width:max-content;
	}

	&__Container#{$-suffix} &__Surface {
		width: $-base_width;
		min-height: $-base_height;
	}
}

@mixin RV-Fan--auto($-base_height, $-base_width, $-suffix: '') {

	&__Container#{$-suffix} {
		flex-flow: row wrap;
	}

	&__Container#{$-suffix} &__Surface {
		width: calc(100% - #{$-base_width});
		min-width: $-base-width;
		height: $-base_height;
	}
}

@mixin RV-Fan--fullWidth($-base_height, $-base_width, $-suffix: '') {
	&__Container#{$-suffix} &__Base, &__Container#{$-suffix} &__Surface {
		flex-grow: 1;
	}
}

@mixin RV-Fan ($-base_height, $-base_width) {
	@include RV-Fan--vertical($-base_height, $-base_width, '--vertical');
	@include RV-Fan--horizontal($-base_height, $-base_width, '--horizontal');
	@include RV-Fan--auto($-base_height, $-base_width, '--auto');
	@include RV-Fan--fullWidth($-base_height, $-base_width, '--fullWidth');

	&__Container {
		display: flex;
	}

	&__Base {
		height: $-base_height;
		width: $-base_width;
		flex: 0 0 auto;
	}

	&__Surface {
		@include RV-ContentCrop;
	}
}

.RV-Fan {
	@include RV-Fan(280px, 320px);
}