/* Mixins
================================================== */
/* Breakpoints
================================================== */
/* Images
================================================== */
figure {
  border: none;
  padding: 0;
  display: inline-block;
  margin: 1em 0;
}

img {
  max-width: 100%;
  height: auto;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
  aspect-ratio: attr(width)/attr(height);
}

/* lazy load
================================================== */
.rocket-lazyload {
  opacity: 0;
  transition: opacity 1s;
}
.rocket-lazyload.lazyloaded {
  opacity: 1;
}

.portrait-image {
  border-radius: 1em;
  padding-bottom: 64%;
  width: 100%;
  -ms-background-size: cover;
  background-size: cover;
  background-position: center center;
}
@media (min-width: 769px) {
  .portrait-image {
    width: 85%;
    border-radius: 2em;
    padding-bottom: 100%;
  }
}

/* Background images
========================================================== */
.fillparent-with-background-image {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

.background-image {
  -ms-background-size: cover;
  background-size: cover;
  background-position: center center;
}

.parralax-background {
  opacity: 0;
}

.no-touch .parralax-background,
.touch .parralax-background {
  opacity: 1;
}

.no-touch .parralax-background {
  background-attachment: fixed;
}