/*------------------------------------*\ #SUPER-HERO-CONTENT-BLOCK \*------------------------------------*/ $super-hero-content-block-content-max-width: 50% !default; .super-hero-content-block { position: relative; overflow: hidden; } .super-hero-content-block--hide-mobile { display: none; @include respond-to($medium-breakpoint) { display: block; } } /** * 1. Above .super-hero-content-block__media-container */ .super-hero-content-block__content { position: absolute; z-index: 10; /* [1] */ padding: $spacing-unit * 2; max-width: $super-hero-content-block-content-max-width; } .super-hero-content-block__media-container {} .super-hero-content-block__media-container--maintain-aspect-ratio { width: 100%; height: 0; .super-hero-content-block__media { position: absolute; width: 100%; height: 100%; } } .super-hero-content-block__media {} .super-hero-content-block__media--resize { background-size: contain; background-repeat: no-repeat; } .super-hero-content-block__media--crop { position: absolute; background-size: cover; } .super-hero-content-block__media--crop-center { background-position: 50% 50%; } .super-hero-content-block__media--crop-right { background-position: 100% 0%; } .super-hero-content-block__media--crop-left { background-position: 0% 100%; } .super-hero-content-block__media--switch {}