html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

.fade-in {
  animation: fadeIn ease 1.4s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.background-purple {
  background-color: #9185be;
  color: white;
}

.background-green {
  background-color: #a7cebf;
}

.background-orange {
  background-color: #f39768;
}

.background-orange + .background-orange,
.background-purple + .background-purple,
.background-green + .background-green {
  padding-top:10px;
}

/* lazysizes and kirby-srcset */
figure { width: 100%; }
img[data-sizes="auto"] { display: block; width: 100%; }

/* class name must matches the value of `ratio` setting. */
.lazysrcset-ratio {
    position: relative;
}
.lazysrcset-ratio > img {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.lazysrcset-ratio > img:after {
    display: block;
    width: 100%;
    height: 0;
    content: '';
}