/**
 * 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--single_column_content .content-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (min-width: 1260px) {
  .component--single_column_content .content-bottom {
    flex-direction: row;
    align-items: normal;
    gap: 2rem;
  }
}
.component--single_column_content .content-bottom .single-column--images {
  flex: 2;
  position: relative;
}
.component--single_column_content .content-bottom .single-column--images > * {
  position: absolute;
}
.component--single_column_content .content-bottom .single-column--images img {
  border-radius: 50%;
  border: 8px solid var(--sky-blue);
  height: auto;
}
.component--single_column_content .content-bottom .single-column--images .field--name-field-single-col-small-image {
  width: 235px;
  bottom: 0;
  right: 0;
  position: relative;
}
@media screen and (min-width: 1260px) {
  .component--single_column_content .content-bottom .single-column--images .field--name-field-single-col-small-image {
    position: absolute;
  }
}
.component--single_column_content .content-bottom .single-column--images .field--name-field-single-col-large-image {
  display: none;
  width: 340px;
  top: 0;
  left: 0;
  margin-left: -10rem;
}
@media screen and (min-width: 1260px) {
  .component--single_column_content .content-bottom .single-column--images .field--name-field-single-col-large-image {
    display: block;
  }
}
.component--single_column_content .content-bottom .field--name-field-single-col-content-body {
  flex: 3;
}
.component--single_column_content .content-bottom .field--name-field-single-col-content-body .button {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}
@media screen and (min-width: 1260px) {
  .component--single_column_content .content-bottom .field--name-field-single-col-content-body .button {
    display: inline-flex;
  }
}
.component--single_column_content.overlap-hero {
  margin-top: -15rem;
  z-index: 3;
  position: relative;
}
@media screen and (min-width: 1260px) {
  .component--single_column_content.overlap-hero {
    margin-top: -5rem;
  }
}
@media screen and (min-width: 1260px) {
  .component--single_column_content.overlap-hero .field--name-field-single-col-small-image {
    margin-bottom: 5rem;
  }
}
.component--single_column_content.overlap-hero .field--name-field-single-col-large-image {
  margin-top: -15rem;
}