.carousel .slide figure figcaption {
  padding: 0.5rem;
}
.carousel .slide figure figcaption p {
  margin-bottom: 0;
}

.carousel .slide {
  margin: 0 0 1rem 0;
  background-color: #017b54;
  color: #fefefe;
}

@media only screen and (min-width: 480px) {

  :root {
    --carousel-height: 570px !important;
    --control-height: 60px;
  }

  .carousel.slick-initialized.slick-slider.slick-dotted {
    margin-bottom: calc(1rem + var(--control-height)) !important;
  }

  .photo-credit {
    font-size: 0.9rem;
    font-style: italic;
  }

  .carousel .slide {
    height: var(--carousel-height) !important;
    margin: 0;
  }

  .carousel .slide figure {
    height: var(--carousel-height);
  }

  .carousel .slide figure figcaption {
    padding: 0.5rem 0.5rem 0 0.5rem;
  }

  .carousel .slick-dots {
    bottom: -60px;
    opacity: 1;
  }

  .carousel button.slick-autoplay-toggle-button {
    margin: 0;
    bottom: -60px;
  }
}