.m__story { }

.story {
    background: var(--color-gray-light); }

.story .story__row {
   display: flex;
   flex-wrap: nowrap;
   border-radius: var(--border-radius);
   margin-bottom: var(--spacing__x);
   background-color: var(--color__blue__tint); }

.story .story__row .story__row__content,
.story .story__row .story__row__media {
   display: flex;
   flex-direction: row;
   min-height: 50vh;
   width: 50%; }

.story .story__row .story__row__media {
   display: block;
   margin: 0 auto;
   overflow: hidden; 
   position: relative;
   margin-right: var(--spacing__x); }

.story .story__row .story__row__media .container {
   position: absolute;
   top: 0;
   background: red;
   left: 0;
   width: 100%;
   height: 100%; }
    
.story .story__row .story__row__content .container {
    width: 100%;
    padding: var(--spacing__x); }

/* ALT ROWS */
.story .story__row:nth-of-type(even) {
   background-color: var(--color__gray__light);
   flex-direction: row-reverse; }

.story .story__row:nth-of-type(even) .story__row__media {
   margin-right: 0;
   margin-left: var(--spacing__x); }


/* MEDIA WIDTH */
.m__story__images .story .story__row__content {
   width: 38%; }

.m__story__images .story .story__row__media {
   width: 62%; }
   



@media all and (max-width: 900px) {
    
   .story .story__row {
      flex-wrap: wrap;
      flex-direction: column-reverse !important; }
      
   .story .story__row .story__row__content,
   .story .story__row .story__row__media {
      min-height: 0;
      width: 100%;
      flex-basis: 100%; }
      
   .story .story__row .story__row__media {
       min-height: 40vh;
      margin: 0 !important; }
}