.exhibition-panel {
  position: fixed;
  right: -60vw;
  top: 0;
  bottom: 0;
  width: 50%;
  /* background-color: var(--accent); */
  background-color: var(--bg);
  opacity: 85%;
  padding: 1rem 3rem;
  transition: right 0.5s ease-in-out;
  /* color: var(--bg); */
  color: var(--accent);
  overflow-y: scroll;

  &.active {
    right: 0;
  }

  .exh-title {
    margin: 3rem 0;
    text-transform: uppercase;
    font-size: 1.1rem;
  }

  button.close-exh-panel {
    position: absolute;
    right: 3rem;
    top: 1rem;
    transition: color 0.2s ease-in-out;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.2rem;
    color: var(--accent);
  }

  .exh-photos {
    margin: 3rem 0;
    display: flex !important;
    flex-direction: column;
    gap: 1rem;
  }

  .exh-title,
  .exh-year,
  .exh-type,
  .exh-venue,
  .exh-location,
  .exh-description {
    opacity: 0;
  }

  .exh-title.show,
  .exh-year.show,
  .exh-type.show,
  .exh-venue.show,
  .exh-location.show,
  .exh-description.show {
    opacity: 1;
  }

  @media only screen and (max-width: 800px) {
    right: -100vw;
  }

  @media only screen and (max-width: 750px) {
    width: 100%;
    opacity: 100%;
    padding: 1rem;

    .exh-info {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .exh-title {
      text-align: center;
      margin: 5rem auto 3rem auto;
    }

    button.close-exh-panel {
      right: 1rem;
    }
  }
}