// Breakpoints
$bp-tiny: 40em; // 640px
$bp-small: 48em; // 768px
$bp-medium: 64em; // 1024px
$bp-large: 85.375em; // 1366px
$bp-xlarge: 120em; // 1920px
$bp-xxlarge: 160em; // 2560px

// Media Queries
$mq-tiny: "(min-width: #{$bp-tiny})";
$mq-small: "(min-width: #{$bp-small})";
$mq-medium: "(min-width: #{$bp-medium})";
$mq-large: "(min-width: #{$bp-large})";
$mq-xlarge: "(min-width: #{$bp-xlarge})";
$mq-xxlarge: "(min-width: #{$bp-xxlarge})";
$mq-retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)";

.b {
  height: calc(89vh / 5 );
}
.b_index {
  height: calc(89vh / 4.5 );
}

.banner {
  width: 98vw;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 50% 5rem;
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  .title {
    background: var(--background-body-opaq);
    color: var(--text-main);
    margin-bottom: 0;
    text-align: center;
    text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
          0px 8px 13px rgba(0,0,0,0.1),
          0px 18px 23px rgba(0,0,0,0.1);
    
  }
}
.altbg {
  max-height: 6em;
}

 @media #{$mq-tiny} {
	.banner {
    width: 89%;
	margin-left: auto;
	margin-right: auto;
  }
  .b {
    height: calc(89vw / 3.5 );
  }
  .b_index {
    height: calc(89vw / 3 );
  }
  .altbg {
    max-height: 7em;
  }
}

.dev {
  color: red;
  background: var(--background-alt);
  display: flex;
  font-size: smaller;
}

.black {
  color: var(--text-main);
}

.left {
  justify-content: flex-start;
}

.right {
  justify-content: flex-end;
}