@import url('https://necolas.github.io/normalize.css/4.1.1/normalize.css');

​

*,

*::before,

*::after {

  box-sizing: inherit;

  -webkit-flex-shrink: 0;

  flex-shrink: 0;

}

​

html {

  box-sizing: border-box;

  min-height: 100%;

}

​

html,

body {

  display: flex;

  flex-direction: column;

  flex: 1 0 auto;

}

​

.mm {

  display: flex;

  flex-flow: row nowrap;

​

  &-fill {

    display: flex;

    flex-flow: row nowrap;

    // pulled from my other absolute stacking non-losing flow component

    margin-right: -100%;

    width: 100%;

​

    overflow: hidden;

​

    &::before,

    &::after {

      content: '';

      display: block;

      width: 100%;

      visibility: hidden;

      margin-right: -100%;

    }

    // firefox (not sure of spec) doesn't allow vert padding to take % value from width

    // if height set to 0 WHEN parent nodes display property is set to flex...

    // so it needs display set to 'table' for padding to set height

    &::before {

      display: table;

    }

    // firefox has issue with min-height when display: table, so only set to ::before

    // could also be related to the parents display set to flex

​

    &--asp1x4::before  { padding-bottom: 400%; }

    &--asp1x3::before  { padding-bottom: 300%; }

    &--asp1x2::before  { padding-bottom: 200%; }

​

    &--asp2x1::before  { padding-bottom: calc((1 / 2) * 100%); }

    &--asp2x3::before  { padding-bottom: calc((3 / 2) * 100%); }

    &--asp2x5::before  { padding-bottom: calc((5 / 2) * 100%); }

​

    &--asp3x1::before  { padding-bottom: calc((1 / 3) * 100%); }

    &--asp3x2::before  { padding-bottom: calc((2 / 3) * 100%); }

    &--asp3x4::before  { padding-bottom: calc((4 / 3) * 100%); }

    &--asp3x5::before  { padding-bottom: calc((5 / 3) * 100%); }

    &--asp3x7::before  { padding-bottom: calc((7 / 3) * 100%); }

    &--asp3x8::before  { padding-bottom: calc((8 / 3) * 100%); }

​

    &--asp4x1::before  { padding-bottom: calc((1 / 4) * 100%); }

    &--asp4x3::before  { padding-bottom: calc((3 / 4) * 100%); }

    &--asp4x5::before  { padding-bottom: calc((5 / 4) * 100%); }

    &--asp4x7::before  { padding-bottom: calc((7 / 4) * 100%); }

    &--asp4x9::before  { padding-bottom: calc((9 / 4) * 100%); }

    &--asp4x11::before { padding-bottom: calc((11 / 4) * 100%); }

    &--asp4x13::before { padding-bottom: calc((13 / 4) * 100%); }

    &--asp4x15::before { padding-bottom: calc((15 / 4) * 100%); }

​

    &--asp8x1::before  { padding-bottom: calc((1 / 8) * 100%); }

    &--asp8x3::before  { padding-bottom: calc((3 / 8) * 100%); }

    &--asp8x5::before  { padding-bottom: calc((5 / 8) * 100%); }

    &--asp8x7::before  { padding-bottom: calc((7 / 8) * 100%); }

​

    &--asp10x1::before  { padding-bottom: calc((1 / 10) * 100%); }

    &--asp10x2::before  { padding-bottom: calc((2 / 10) * 100%); }

    &--asp10x3::before  { padding-bottom: calc((3 / 10) * 100%); }

    &--asp10x4::before  { padding-bottom: calc((4 / 10) * 100%); }

    &--asp10x6::before  { padding-bottom: calc((6 / 10) * 100%); }

    &--asp10x7::before  { padding-bottom: calc((7 / 10) * 100%); }

    &--asp10x8::before  { padding-bottom: calc((8 / 10) * 100%); }

    &--asp10x9::before  { padding-bottom: calc((9 / 10) * 100%); }

​

    &--asp16x1::before  { padding-bottom: calc((1 / 16) * 100%); }

    &--asp16x3::before  { padding-bottom: calc((3 / 16) * 100%); }

    &--asp16x5::before  { padding-bottom: calc((5 / 16) * 100%); }

    &--asp16x7::before  { padding-bottom: calc((7 / 16) * 100%); }

    &--asp16x9::before  { padding-bottom: calc((9 / 16) * 100%); }

    &--asp16x11::before { padding-bottom: calc((11 / 16) * 100%); }

    &--asp16x13::before { padding-bottom: calc((13 / 16) * 100%); }

    &--asp16x15::before { padding-bottom: calc((15 / 16) * 100%); }

​

    &--asp16x9::before  { padding-bottom: calc((9 / 16) * 100%); }

    &--asp21x9::before  { padding-bottom: calc((9 / 21) * 100%); }

​

    &--min10v::after  { min-height: 10vh; }

    &--min20v::after  { min-height: 20vh; }

    &--min30v::after  { min-height: 30vh; }

    &--min40v::after  { min-height: 40vh; }

    &--min50v::after  { min-height: 50vh; }

    &--min60v::after  { min-height: 60vh; }

    &--min70v::after  { min-height: 70vh; }

    &--min80v::after  { min-height: 80vh; }

    &--min90v::after  { min-height: 90vh; }

    &--min100v::after { min-height: 100vh; }

    &--min1r  { min-height: 1rem; }

    &--min2r  { min-height: 2rem; }

    &--min3r  { min-height: 3rem; }

    &--min4r  { min-height: 4rem; }

    &--min5r  { min-height: 5rem; }

    &--min6r  { min-height: 6rem; }

    &--min7r  { min-height: 7rem; }

    &--min8r  { min-height: 8rem; }

    &--min9r  { min-height: 9rem; }

    &--min10r { min-height: 10rem; }

    &--min11r { min-height: 11rem; }

    &--min12r { min-height: 12rem; }

    &--min13r { min-height: 13rem; }

    &--min14r { min-height: 14rem; }

    &--min15r { min-height: 15rem; }

    &--min16r { min-height: 16rem; }

    &--min17r { min-height: 17rem; }

    &--min18r { min-height: 18rem; }

    &--min19r { min-height: 19rem; }

    &--min20r { min-height: 20rem; }

    &--max10v  { max-height: 10vh; }

    &--max20v  { max-height: 20vh; }

    &--max30v  { max-height: 30vh; }

    &--max40v  { max-height: 40vh; }

    &--max50v  { max-height: 50vh; }

    &--max60v  { max-height: 60vh; }

    &--max70v  { max-height: 70vh; }

    &--max80v  { max-height: 80vh; }

    &--max90v  { max-height: 90vh; }

    &--max100v { max-height: 100vh; }

  }

  // might swap all classes to be on mm base then have 2 level class specifitity for the fill node :/

  &--min10p  { min-height: 10%; }

  &--min20p  { min-height: 20%; }

  &--min25p  { min-height: 25%; }

  &--min30p  { min-height: 30%; }

  &--min40p  { min-height: 40%; }

  &--min50p  { min-height: 50%; }

  &--min60p  { min-height: 60%; }

  &--min70p  { min-height: 70%; }

  &--min75p  { min-height: 75%; }

  &--min80p  { min-height: 80%; }

  &--min90p  { min-height: 90%; }

​

  // not sure if max-height is a good practice even if it works :/ because it's on the outer container if anything, not on the fill which can be 'overridden' by the contents

  &--max10p  { max-height: 10%; }

  &--max20p  { max-height: 20%; }

  &--max25p  { max-height: 25%; }

  &--max30p  { max-height: 30%; }

  &--max40p  { max-height: 40%; }

  &--max50p  { max-height: 50%; }

  &--max60p  { max-height: 60%; }

  &--max70p  { max-height: 70%; }

  &--max75p  { max-height: 75%; }

  &--max80p  { max-height: 80%; }

  &--max90p  { max-height: 90%; }

  &--max100p { max-height: 100%; }

​

  &-content {

    display: flex;

    flex-direction: column;

    justify-content: center;

    width: 100%;

    // all this is in case of multiple stacking content nodes?

    margin-right: -100%;

    pointer-events: none;

    & > * {

      pointer-events: auto;

    }

  }

}

​

​

.hero {

  background-color: #f00;

  background: #f00 url('//placekitten.com/700/400');

  background-size: cover;

  color: #fff;

}

​