/* ==========================================================================
   #LAYOUT
   ========================================================================== */






/* Default/mandatory classes
   ========================================================================== */










/**
 * 1. Allows us to use the layout object on any type of element.
 * 2. We need to defensively reset any box-model properties.
 * 3. Use the negative margin trick for multi-row grids:
 *    http://csswizardry.com/2011/08/building-better-grid-systems/
 */


 .o-layout {
  display: flex;                        /* 1 */
  flex-wrap: wrap;
  padding: 0;                           /* 2 */
  margin: 0;                            /* 2 */
  list-style-type: none;                /* 1 */
  margin-left: -15px;
}





/**
* 1. Required in order to combine fluid widths with fixed gutters.
* 2. By default, all layout items are full-width (mobile first).
* 3. Gutters provided by left padding:
*    http://csswizardry.com/2011/08/building-better-grid-systems/
*/


.o-layout__item {
  flex: 1 1 100%;                             /* 1 */
  max-width: 100%;                            /* 1 */
  box-sizing: border-box;                     /* 2 */
  padding-left: 15px;                         /* 3 */
  margin-bottom: 15px;
  height: 250px;
}










/* Gutter size modifiers
   ========================================================================== */










.o-layout--fl {
  margin-left: 0;
}

.o-layout--fl > .o-layout__item {
  padding-left: 0;
}





.o-layout--xs {
  margin-left: calc(var(--global-spacing-unit-xs) * -1);
}

.o-layout--xs > .o-layout__item {
  padding-left: var(--global-spacing-unit-xs);
}





.o-layout--sm {
  margin-left: calc(var(--global-spacing-unit-sm) * -1);
}

.o-layout--sm > .o-layout__item {
  padding-left: var(--global-spacing-unit-sm);
}





.o-layout--lg {
  margin-left: calc(var(--global-spacing-unit-lg) * -1);
}

.o-layout--lg > .o-layout__item {
  padding-left: var(--global-spacing-unit-lg);
}





.o-layout--xl {
  margin-left: calc(var(--global-spacing-unit-xl) * -1);
}

.o-layout--xl > .o-layout__item {
  padding-left: var(--global-spacing-unit-xl);
}











/* Auto width items
   ========================================================================== */










/**
* Each item grows to fill available space base on distribution amoung the number of items
* Items are stil capable of wrapping
*/


.o-layout--auto > .o-layout__item {
  flex: 1 1 0;
}










/* Equal height columns
   ========================================================================== */










/**
* Stretch all grid items of each row to have an equal-height.
* Please be aware that this modifier class doesn’t take any effect in IE9 and
* below and other older browsers due to the lack of `display: flex` support.
*/





.o-layout--stretch > .o-layout__item {
  display: flex;
  flex-wrap: wrap;
}

/* Dont know if this would break something or work in all cases, will find out with trial and error */
.o-layout--stretch > .o-layout__item > * {
    flex: 1 1 100%;
    max-width: 100%;
    width: 100%;
}



.image-masonry__img {
  object-fit: cover;
  height: 100%;
  border-radius: 25px;
}






.u-1\/2 {
  flex: 0 0 50% !important;
  max-width: 50% !important;
  width: 50% !important;
}

.u-2\/4 {
  flex: 0 0 50% !important;
  max-width: 50% !important;
  width: 50% !important;
}

.u-1\/4 {
  flex: 0 0 25% !important;
  max-width: 25% !important;
  width: 25% !important;
}


@media (max-width: 767px) {
  
  .u-1\/2\@sm {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
  
}


@media (max-width: 500px) {
  
  .u-1\/1\@xs {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  
}