.progressive {
  position: relative;
  overflow: hidden;
}

.aspect-ratio--16\/9 {
  padding-top: 56.25%;
}

.aspect-ratio--julia {
  padding-top: 35.5%;
}

.progressive-background {
  background-size: cover;
  background-repeat: no-repeat;
  transition: background-image 300ms ease-in;
}

.progressive__img {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;

  &.is-loaded {
    opacity: 1;
    animation: fade-in 300ms ease-in;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}