// ============================================================================
// :: Visual
// ============================================================================
/**
 *  The visual is a decorative element containing an illustration.
 */

// ============================================================================
// :: Root
// ============================================================================
.m-visual {
  width: 100%;
  height: 100%;
  padding: 3rem 0;
  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;

  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

// ============================================================================
// :: Elements
// ============================================================================
.m-visual__illustration {
  height: 100%;
  width: auto;

  @include respond-at($breakpoint-tablet-default) {
    height: auto;
    width: 50%;
  }
}

// ============================================================================
// :: Modifiers
// ============================================================================
.m-visual--contained {
  background-size: contain;
}

.m-visual--contained\@above-mobile-default {

  @include respond-at($breakpoint-mobile-default) {
		background-size: contain;
	}
}

.m-visual--contained\@above-tablet-default {

  @include respond-at($breakpoint-tablet-default) {
		background-size: contain;
	}
}

.m-visual--contained\@above-desktop-default {

  @include respond-at($breakpoint-desktop-default) {
		background-size: contain;
	}
}

.m-visual--contained\@above-desktop-large {

  @include respond-at($breakpoint-desktop-large) {
		background-size: contain;
	}
}

.m-visual--contained\@below-mobile-default {

  @include respond-to($breakpoint-mobile-default) {
		background-size: contain;
	}
}

.m-visual--contained\@below-tablet-default {

  @include respond-to($breakpoint-tablet-default) {
		background-size: contain;
	}
}

.m-visual--contained\@below-desktop-default {

  @include respond-to($breakpoint-desktop-default) {
		background-size: contain;
	}
}

.m-visual--contained\@below-desktop-large {

  @include respond-to($breakpoint-desktop-large) {
		background-size: contain;
	}
}