@import '../utils/mixins.css';
@import '../utils/variables.css';

$image-width: 375;
$image-height: 211;

.image {
  position: fixed;
  top: 0;
  left: 0;

  @include aspect-ratio($image-width, $image-height);

  z-index: -1;

  // Container
  &__container {
    &:before,
    &:after {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

      transition: 1s opacity ease;
    }

    &:before {
      content: url('/static/images/logo.svg');
      z-index: 1;

      display: flex;
      align-items: center;
      justify-content: center;
    }

    &:after {
      content: "";
      z-index: 0;
      
      background: $color-grey;
    }

    // Loaded
    &--loaded {
      &:before,
      &:after {
        opacity: 0;
      }
    }
  }
}