/*** Override Bootstrap colors */
/* stylelint-disable-next-line scss/no-global-function-names */
html,
body {
  margin: 0;
  padding: 0;
}

p {
  margin: 0;
}

.page-container {
  max-width: 1200px;
}

.region {
  position: relative;
}

figure {
  margin: 0;
}

.region::before {
  display: block;
  content: "";
  width: 100%;
}

.region .experience-component {
  position: absolute;
  top: 0;
  bottom: 0;
  /* replicating the gutters */
  left: 0.5rem;
  right: 0.5rem;
}

.image-text.slot-2 {
  margin-top: 20px;
}

.text-image.slot-1 {
  margin-top: 20px;
}

@media only screen and (min-width: 992px) {
  .image-text.slot-2 {
    margin-top: 0;
  }
  .text-image.slot-1 {
    margin-top: 0;
  }
}
@media only screen and (width: 768px) {
  .column2 img {
    width: 570px;
  }
}
/* padding-top in percentages refers to parent width
   this allows us to specify an aspect-ratio         */
.region-landscape-large::before {
  padding-top: 39.0625%;
}

.region-square::before {
  padding-top: 100%;
}

.region-landscape-small::before {
  padding-top: 50%;
}

.region-portrait-small::before {
  padding-top: 200%;
}