/* From https://codeburst.io/how-to-create-a-simple-css-loading-spinner-make-it-accessible-e5c83c2e464c
   Credit Stuart Nelson - https://codeburst.io/@stuartjnelson
*/

/* Converted Tailwind Config to scss */

.featurette.columns--1 {
  background: #808184;
}

.featurette.columns--1.featurette--overlay {
  margin-top: 150px;
}

.featurette__primary {
  z-index: 10;
}

.columns--1 .featurette__primary {
  background: linear-gradient(85deg, #009bdf, rgba(0, 155, 223, 0.57));
}

.featurette__primary .button.button--angle .button__link::after, .featurette__primary .button.button--angle .button__link::before {
  height: calc(100% - 3px);
}

.columns--2 .featurette__secondary {
  background: linear-gradient(45deg, #515152, rgba(137, 137, 138, 0.87));
}

.alignment--right.columns--2 .featurette__secondary {
  background: linear-gradient(135deg, rgba(242, 112, 98, 0.77), #f27062);
}

.featurette__overlay {
  padding-top: 150px;
  position: absolute;
  height: 100px;
  width: 100%;
  transform: translateZ(-1);
}

@media (min-width: 1024px) {
  .featurette__overlay {
    height: 500px;
  }
}

.featurette__overlay div {
  position: absolute;
  left: 0;
  top: 0;
  transform: skewY(15deg);
  height: 100%;
  width: 100%;
  background: #ECECEC;
  z-index: 10;
  z-index: -1;
}

.featurette picture {
  overflow: hidden;
  z-index: 1;
  height: 250px;
}

@media (min-width: 768px) {
  .featurette picture {
    height: 350px;
  }
}

@media (min-width: 1024px) {
  .featurette picture {
    height: 100%;
  }
}