/*Generic-ified version of square and rectangle content - for no background and no central aignment*/

[class*='scaled__content'],
.breakpoint-mobile-only .grid-row [class*="col-s-"] [class*='scaled__content'],
.breakpoint-retina.breakpoint-mobile-only .grid-row [class*="col-s-"] [class*='scaled__content'], 
.breakpoint-retina.breakpoint-mobile-only .grid-row [class*="col-s-"] [class*='scaled__content'],
.breakpoint-retina.breakpoint-tablet-portrait .grid-row [class*="col-s-"] [class*='scaled__content'] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; 
}
  .scaled__content--centered,
  .breakpoint-mobile-only .scaled__content--s-centered,
  .breakpoint-retina.breakpoint-mobile-only .scaled__content--s-centered,
  .breakpoint-tablet-portrait .scaled__content--s-centered, 
  .breakpoint-tablet-landscape .scaled__content--s-centered  {
    display: flex;
    align-items: center;
    justify-content: center;
  }
      .scaled__content--primary {
        background-color: var(--color-primary);
        color: #fff;
      }
      .scaled__content--secondary {
        background-color: var(--color-secondary);
      }
      .scaled__content--tertiary {
        background-color: var(--color-tertiary);
        color: #fff;
      }
      .scaled__content--primary > *,
      .scaled__content--secondary > *,
      .scaled__content--tertiary > * {
        margin: 1rem;
      }



/* Force grid columns to be square regardless of height*/
      .square__content--primary {
        background-color: var(--color-primary);
      }
      .square__content--secondary {
        background-color: var(--color-secondary);
      }
      .square__content--tertiary {
        background-color: var(--color-tertiary);
      }
    img.square--icon-background{
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
      bottom: 0.5rem;
      left: 0.5rem;
      margin: auto;
      opacity: 0.5;
      height: 90%;
      max-width: 90%;
      width: auto;
    }
      img.square--background svg {
        color: rgba(255, 255, 255, 0.5);
        fill: currentColor;
      }
[class*='rectangle__content'],
.breakpoint-mobile-only .grid-row [class*="col-s-"] [class*='rectangle__content'],
.breakpoint-retina.breakpoint-mobile-only .grid-row [class*="col-s-"] [class*='rectangle__content'] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; 
}
[class*='rectangle__content'] > *:not(.flipcard__background-image) {
  margin: 1rem;
}
  .rectangle__content--primary {
    background-color: var(--color-primary);
  }
  .rectangle__content--secondary {
    background-color: var(--color-secondary);
  }
  .rectangle__content--tertiary {
    background-color: var(--color-tertiary);
  }
  .rectangle__content--centered {
    display: flex;
    align-items: center;
    justify-content: center;
  }

.col-m-square, 
.col-s-square {
  position: relative;
  overflow: hidden;
}
  .square {
    margin-top: 100%;
  }
  [class*='square__content'],
  .breakpoint-mobile-only .grid-row [class*="col-s-"] [class*='square__content'],
  .breakpoint-retina.breakpoint-mobile-only .grid-row [class*="col-s-"] [class*='square__content']
   {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0; 
    display: flex;
    align-items: center;
    justify-content: center;
  }
    .col-m-square [class*='title-tile--reversed'] {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
    .breakpoint-mobile-only .col-m-square [class*='title-tile--reversed'],
    .breakpoint-tablet-portrait .col-m-square [class*='title-tile--reversed'],
    .breakpoint-retina.breakpoint-mobile-only .col-m-square [class*='title-tile--reversed'],
    .breakpoint-retina.breakpoint-tablet-portrait .col-m-square [class*='title-tile--reversed'] {
      position: relative;
    }

.col-m-square,
.col-m-2x1,
.col-m-3x2,
.col-m-3x1,
.col-m-4x3,
.col-m-4x1,
.col-m-5x1,
.col-m-5x3,
.col-m-5x4,
.col-m-6x1,
.col-m-10x3,
.col-m-16x9,
.breakpoint-mobile-only .grid-row .col-s-square,
.breakpoint-retina.breakpoint-mobile-only .grid-row .col-s-square,
.breakpoint-mobile-only .grid-row .col-s-2x1,
.breakpoint-retina.breakpoint-mobile-only .grid-row .col-s-2x1,
.breakpoint-mobile-only .grid-row .col-s-3x2,
.breakpoint-retina.breakpoint-mobile-only .grid-row .col-s-3x2,
.breakpoint-mobile-only .grid-row .col-s-3x1,
.breakpoint-retina.breakpoint-mobile-only .grid-row .col-s-3x1,
.breakpoint-mobile-only .grid-row .col-s-4x3,
.breakpoint-retina.breakpoint-mobile-only .grid-row .col-s-4x3, 
.breakpoint-mobile-only .grid-row .col-s-5x4,
.breakpoint-retina.breakpoint-mobile-only .grid-row .col-s-5x4, 
.breakpoint-mobile-only .grid-row .col-s-16x9,
.breakpoint-retina.breakpoint-mobile-only .grid-row .col-s-16x9 {
  position: relative;
  overflow: hidden;
}
  .col-m-square .square,
  .breakpoint-mobile-only .grid-row .col-s-square .square,
  .breakpoint-retina .breakpoint-mobile-only .grid-row .col-s-square .square, 
  .breakpoint-tablet-portrait .grid-row .col-s-square .square, 
  .breakpoint-tablet-landscape .grid-row .col-s-square .square {
    margin-top: 100%;
  }
  .col-m-2x1 .rectangle,
  .breakpoint-mobile-only .grid-row .col-s-2x1 .rectangle,
  .breakpoint-retina.breakpoint-mobile-only .grid-row .col-s-2x1 .rectangle,
  .breakpoint-tablet-portrait .grid-row .col-s-2x1 .rectangle, 
  .breakpoint-tablet-landscape .grid-row .col-s-2x1 .rectangle,
  .breakpoint-retina.breakpoint-mobile-only .grid-row .col-s-2x1 .square,
  .breakpoint-tablet-portrait .grid-row .col-s-2x1 .square, 
  .breakpoint-tablet-landscape .grid-row .col-s-2x1 .square  {
    margin-top: 48.5%; /*To account for the margin*/
  }
  .col-m-3x2 .rectangle,
  .breakpoint-mobile-only .grid-row .col-s-3x2 .rectangle,
  .breakpoint-retina.breakpoint-mobile-only .grid-row .col-s-3x2 .rectangle,
  .breakpoint-tablet-portrait .grid-row .col-s-3x2 .rectangle, 
  .breakpoint-tablet-landscape .grid-row .col-s-3x2 .rectangle,
  .breakpoint-mobile-only .grid-row .col-s-3x2 .square,
  .breakpoint-retina.breakpoint-mobile-only .grid-row .col-s-3x2 .square,
  .breakpoint-tablet-portrait .grid-row .col-s-3x2 .square, 
  .breakpoint-tablet-landscape .grid-row .col-s-3x2 .square {
    margin-top: 62%;
  }
  .col-m-3x1 .rectangle,
  .breakpoint-mobile-only .grid-row .col-s-3x1 .rectangle,
  .breakpoint-retina.breakpoint-mobile-only .grid-row .col-s-3x1 .rectangle,
  .breakpoint-tablet-portrait .grid-row .col-s-3x1 .rectangle, 
  .breakpoint-tablet-landscape .grid-row .col-s-3x1 .rectangle  {
    margin-top: 30%;
  }
  .col-m-4x3 .rectangle,
  .breakpoint-mobile-only .grid-row .col-s-4x3 .rectangle,
  .breakpoint-tablet-portrait .grid-row .col-s-4x3 .rectangle, 
  .breakpoint-tablet-landscape .grid-row .col-s-4x3 .rectangle,
  .breakpoint-mobile-only .grid-row .col-s-4x3 .square,
  .breakpoint-tablet-portrait .grid-row .col-s-4x3 .square, 
  .breakpoint-tablet-landscape .grid-row .col-s-4x3 .square   {
    margin-top: 75%;
  }
  .col-m-4x1 .rectangle,
  .breakpoint-mobile-only .grid-row .col-s-4x1 .rectangle,
  .breakpoint-retina.breakpoint-mobile-only .grid-row .col-s-4x1 .rectangle,
  .breakpoint-tablet-portrait .grid-row .col-s-4x1 .rectangle, 
  .breakpoint-tablet-landscape .grid-row .col-s-4x1 .rectangle {
    margin-top: 25%;
  }
  .col-m-5x1 .rectangle,
  .breakpoint-mobile-only .grid-row .col-s-5x1 .rectangle,
  .breakpoint-retina.breakpoint-mobile-only .grid-row .col-s-5x1 .rectangle,
  .breakpoint-tablet-portrait .grid-row .col-s-5x1 .rectangle, 
  .breakpoint-tablet-landscape .grid-row .col-s-5x1 .rectangle {
    margin-top: 20%;
  }
  .col-m-5x3 .rectangle,
  .breakpoint-mobile-only .grid-row .col-s-5x3 .rectangle,
  .breakpoint-retina.breakpoint-mobile-only .grid-row .col-s-5x3 .rectangle,
  .breakpoint-tablet-portrait .grid-row .col-s-5x3 .rectangle, 
  .breakpoint-tablet-landscape .grid-row .col-s-5x3 .rectangle {
    margin-top: 59%;
  }
  .col-m-5x4 .rectangle,
  .breakpoint-mobile-only .grid-row .col-s-5x4 .rectangle,
  .breakpoint-tablet-portrait .grid-row .col-s-5x4 .rectangle, 
  .breakpoint-tablet-landscape .grid-row .col-s-5x4 .rectangle,
    .breakpoint-mobile-only .grid-row .col-s-5x4 .square,
  .breakpoint-tablet-portrait .grid-row .col-s-5x4 .square, 
  .breakpoint-tablet-landscape .grid-row .col-s-5x4 .square   {
    margin-top: 80%;
  }
  .col-m-6x1 .rectangle {
    margin-top: 16.6%;
  }
  .col-m-10x3 .rectangle {
    margin-top: 33.33%;
  }
  .col-m-16x9 .rectangle {
    margin-top: 56.25%;
  }

    .breakpoint-mobile-only [class*="col-m-"] .rectangle,
    .breakpoint-tablet-portrait [class*="col-m-"] .rectangle, 
    .breakpoint-mobile-only [class*="col-m-"] .square,
    .breakpoint-tablet-portrait [class*="col-m-"] .square {
      margin-top: unset;
    }

    .breakpoint-mobile-only [class*="col-m-"],
    .breakpoint-tablet-portrait [class*="col-m-"], 
    .breakpoint-retina.breakpoint-mobile-only [class*="col-m-"],
    .breakpoint-retina.breakpoint-tablet-portrait [class*="col-m-"] {
      height: 100%;
    }


      .breakpoint-mobile-only [class*="col-m-"] [class*="rectangle__content"],
      .breakpoint-tablet-portrait [class*="col-m-"] [class*="rectangle__content"],
      .breakpoint-mobile-only [class*="col-m-"] [class*="square__content"],
      .breakpoint-tablet-portrait [class*="col-m-"] [class*="square__content"],
      .breakpoint-mobile-only [class*="col-m-"] [class*="scaled__content"],
      .breakpoint-tablet-portrait [class*="col-m-"] [class*="scaled__content"],
      .breakpoint-mobile-only [class*="col-m-"] [class*="flipcard--"],
      .breakpoint-tablet-portrait [class*="col-m-"] [class*="flipcard--"]  {
        position: relative;
      }