.work-page__image {
  display: none;
}

.work-page__main-image {
  cursor: zoom-in;
}

.work-page__thumbnails {
  order: 2;
}

.work-page__thumbnail {
  cursor: pointer;
}

.work-page__info {
  font-size: var(--type-sm);
  order: 1;
}

.work-page__title {
  font-size: var(--type-md);
}

.work-page__modal {
  align-items: center;
  background-color: var(--off-black);
  display: flex;
  height: 100vh;
  justify-content: center;
  left: 0;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 2;
}

.work-page__modal-close {
  color: white;
  cursor: pointer;
  font-size: 30px;
  position: fixed;
  right: var(--gutter);
  top: 10px;
}

.work-page__modal-image {
  height: 100%;
  width: auto;
}

@media screen and (min-width: 900px) {
  .work-page__image {
    display: block;
  }

  .work-page__main-image.aspect-ratio-landscape {
    height: auto;
    width: 100%;
  }

  .work-page__main-image.aspect-ratio-portrait {
    max-height: 75vh;
    width: unset;
  }

  .work-page__thumbnails {
    order: unset;
  }

  .work-page__info {
    order: unset;
  }
}