/**
 * Replace `$search` with `$replace` in `$string`
 *
 * @author Hugo Giraudel
 * @param {String} $string - Initial string
 * @param {String} $search - Substring to replace
 * @param {String} $replace ('') - New value
 * @return {String} - Updated string
 */
/**
 * http://codepen.io/philippkuehn/pen/zGEjxB
 */
/**
 * Change the fill color of an svg.
 * @param  {[type]} $svg
 * @param  {[type]} $color: $black
 */
/**
 * Create properly pathed image url
 * Usage: background-image: image-url('image.png');
 * Returns background-image: url('/themes/custom/mmg8_cog/dist/images/image.png');
 */
/**
 * Replace `$search` with `$replace` in `$string`
 *
 * @author Hugo Giraudel
 * @param {String} $string - Initial string
 * @param {String} $search - Substring to replace
 * @param {String} $replace ('') - New value
 * @return {String} - Updated string
 */
/**
 * http://codepen.io/philippkuehn/pen/zGEjxB
 */
/**
 * Change the fill color of an svg.
 * @param  {[type]} $svg
 * @param  {[type]} $color: $black
 */
/**
 * Create properly pathed image url
 * Usage: background-image: image-url('image.png');
 * Returns background-image: url('/themes/custom/mmg8_cog/dist/images/image.png');
 */
/**
 * Change the color of the svg.
 */
/**
 * Maintains aspect ratio
 * Grabbed from: https://css-tricks.com/snippets/sass/maintain-aspect-ratio-mixin
 * @param  {[type]} $width  [description]
 * @param  {[type]} $height [description]
 * @return {[type]}         [description]
 */
.component--fact-box {
  margin: 3rem 1rem;
  position: relative;
}
.component--fact-box::before {
  background-image: url(/themes/custom/mmg8_cog/images/sections-bg.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  content: "";
  height: 100%;
  width: 120%;
  left: -10%;
  position: absolute;
}
.component--fact-box .content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}
.component--fact-box.tan::before {
  background-size: unset;
}
@media screen and (min-width: 1260px) {
  .component--fact-box.tan::before {
    background-size: 100%;
  }
}
.component--fact-box.tan .content {
  margin: 0 auto 0;
  max-width: 100rem;
  background-color: var(--sand);
  border: 4px solid var(--deep-blue);
  border-radius: 42px;
  padding: 3rem;
}
@media screen and (min-width: 680px) {
  .component--fact-box.tan .content {
    flex-direction: row;
    gap: 40px;
  }
}
@media screen and (min-width: 680px) {
  .component--fact-box.tan .fact-box--text {
    order: 2;
    flex: 3;
  }
}
.component--fact-box.tan .fact-box--text h2 {
  text-align: center;
  padding: 0;
  text-transform: uppercase;
  font-family: "CA Negroni Fill";
  font-size: 2.4rem;
  color: var(--deep-blue);
  letter-spacing: -2px;
}
.component--fact-box.tan .fact-box--text .field--name-field-fact-box-body {
  line-height: 1.2;
}
@media screen and (min-width: 680px) {
  .component--fact-box.tan .fact-box--image {
    order: 1;
    flex: 1;
    width: 22rem;
  }
}
.component--fact-box.tan .fact-box--image img {
  width: 22rem;
}
.component--fact-box.blue::before {
  display: none;
}
@media screen and (min-width: 1260px) {
  .component--fact-box.blue::before {
    display: block;
  }
}
.component--fact-box.blue .content {
  margin: 0 auto 0;
  max-width: 70rem;
  background-color: var(--deep-blue);
  border-radius: 25px;
}
@media screen and (min-width: 1260px) {
  .component--fact-box.blue .content {
    margin: 0 auto 0;
    max-width: 110rem;
    flex-direction: row;
    background-color: unset;
    border: 12px solid rgba(56, 175, 179, 0.6);
  }
}
.component--fact-box.blue .fact-box--text {
  order: 2;
  color: var(--white);
  padding: 2rem 2rem 0;
  flex: 1;
}
@media screen and (min-width: 1260px) {
  .component--fact-box.blue .fact-box--text {
    padding: 1rem 5rem 1rem 8rem;
    background-image: url(/themes/custom/mmg8_cog/images/blue-fact-box-bg.svg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0 13px 13px 0;
    z-index: 1;
  }
}
.component--fact-box.blue .fact-box--text h2 {
  font-family: "Vintage Rotter";
  font-size: 5.1rem;
  color: var(--white);
  padding: 0 2rem;
  position: relative;
  z-index: 1;
  text-align: center;
}
@media screen and (min-width: 1260px) {
  .component--fact-box.blue .fact-box--text h2 {
    font-size: 6.5rem;
  }
}
.component--fact-box.blue .fact-box--text .field--name-field-fact-box-subtitle {
  font-family: "CA Negroni Inline";
  font-size: 4rem;
  line-height: 1;
  color: var(--umbrella-yellow);
  margin-top: -1rem;
  text-align: center;
}
@media screen and (min-width: 1260px) {
  .component--fact-box.blue .fact-box--text .field--name-field-fact-box-subtitle {
    font-size: 6.5rem;
    margin-top: -2rem;
  }
}
.component--fact-box.blue .fact-box--text a {
  color: var(--white);
}
.component--fact-box.blue .fact-box--text .button {
  color: var(--deep-blue);
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}
.component--fact-box.blue .fact-box--image {
  order: 1;
}
@media screen and (min-width: 1260px) {
  .component--fact-box.blue .fact-box--image {
    flex: 1;
    margin-right: -10.3rem;
  }
}
.component--fact-box.blue .fact-box--image img {
  border-radius: 25px;
  margin-bottom: -10.3px;
}
@media screen and (min-width: 1260px) {
  .component--fact-box.blue .fact-box--image img {
    border-radius: 13px;
  }
}