@layer specific {
  .slideshow-container {
    max-width: 1000px;
    margin: auto;

    min-width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
  }

  /* Hide the images by default */
  .mySlides {
    display: none;
    width: 100%;
  }

  /* Fill header */
  .mySlides img {
    filter: brightness(0.8);
    height: 100%;
  }

  .fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
  }

  @-webkit-keyframes fade {
    from {
      opacity: 0.4;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes fade {
    from {
      opacity: 0.4;
    }
    to {
      opacity: 1;
    }
  }

  .exhibit-slideshow-container {
    display: grid;
    margin: auto;
    width: 80%;
  }

  /* The grid placement hides the images by default */
  .exhibitSlides {
    grid-column: 1;
    grid-row: 1;
    transition: opacity 0.5s ease-in-out;
    width: 100%;
  }

  @media (max-width: 800px) {
    .exhibit-slideshow-container {
      width: 100%;
    }
  }

  .slide--hidden {
    opacity: 0;
  }
}