.c-projector {
  position: relative;
  height: 100%;
}

.c-projector__figure {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  height: 100%;
}

.c-projector__picture {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  height: 100%;
  display: flex;
  align-items: center; 
  background-color: $borderColor;
  opacity: 0;
  transition: opacity 0.5s;

  &.is-active {
    opacity: 1;
  }
}

.c-projector__img {
  // make sure it stretches the container
  width: 100%;
  //height: 100%;
  //object-fit: cover; // Fallback for IE via JS polyfill

  @include respond-to-width-beyond(740){
    max-height: 78vh; // Make sure images are visible entirely on small devices in landscape)
  }
}


.c-projector__control {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  margin-bottom: 8px;
  margin-right: 8px;

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

.c-projector__button {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px;
  padding: 10px;
  color: $blue;
  background: white;
  border: 1px solid white;
  border-radius: 100%;
  cursor: pointer;
  transition-property: background-color, border, box-shadow;
  transition-duration: 0.25s;
  outline: none;

  &:hover {
    color: white;
    background-color: $blue;
    border-color: transparent;
    cursor: pointer;
  }

  &:active {
    background-color: scale-color($blue, $lightness: -30%);
    color: white;
  }

  &:focus {
    box-shadow: 0 1px 6px 0 black;
  }

  &.previous {
    transform: rotate(0.5turn);
  }
}

.c-projector__arrow{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 16px;
  font-size: 0;
  line-height: 0;
}