/* Mixins */
/**
 * Returns value from colors map
 */
/**
 * Turns pixels to rems
 * We typically set out HTML font size to 62.5% which helps us have a base-10 value to work with.
 * So the following mixin accepts a pixel value that is then turned into a corresponding rem value.
 */
/**
 * Function for converting a px based font-size to rem.
 *
 * @param $size - the value in pixel you want to convert
 *
 * e.g. p {to-rem(12);}
 *
 */
.node--type--grid-element--default,
.node--type--grid-element--teaser {
  width: 100%;
  height: 200px;
  background-position: center;
  position: relative;
  border-radius: 1rem;
}
.node--type--grid-element--default a,
.node--type--grid-element--teaser a {
  display: block;
  width: 100%;
  height: 100%;
}
.node--type--grid-element--default .grid-element-content,
.node--type--grid-element--teaser .grid-element-content {
  background-color: rgba(0, 0, 0, 0.5);
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
  position: absolute;
  bottom: 0;
  width: 100%;
  color: white;
  padding: 15px 17px;
}
.node--type--grid-element--default .grid-element-content .title,
.node--type--grid-element--teaser .grid-element-content .title {
  font-size: 2rem;
  line-height: 2rem;
}
.node--type--grid-element--default .grid-element-content .subtitle,
.node--type--grid-element--teaser .grid-element-content .subtitle {
  font-size: 1.6rem;
  line-height: 1.6rem;
}