.show-aviary{
  position: relative;
}

.stage {
  height: auto;
  display: block;
  padding: 2rem 1.5rem 3rem 1.5rem;
  background: #efefef;
}

#primary div .stage-and-thumbs-wrapper > .stage {
  box-shadow: 3px 3px 6px #dee2e6;
}

a.image-wrapper-link{
  display: block;
  text-decoration: none;
  color: inherit;
}

/* constrain the thumbnail */
.image-wrapper img{
  display: block;
  max-width: 100%;
  height: auto;
}

.image-wrapper{
  position: relative;
  display: inline-block;     /* or block */
}


.image-wrapper span{
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);

    display: block;          /* important */
    width: max-content;      /* take natural text width */
    max-width: calc(100% - 24px); /* but never exceed wrapper */
    white-space: normal;     /* allow wrapping only when needed */
    text-align: center;

    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(0,0,0,.65);
    color: #fff;
    box-sizing: border-box;  /* important so padding is included */

    font-family: "Arial", "sans-serif";
    font-size: 1.6rem;
    z-index: 3;
}

@media (max-width: 600px){
  .image-wrapper span{
    font-size: 1rem;
    line-height: 1;
  }
}


/* only <= 350px: center vertically */
@media (max-width: 350px){
  .image-wrapper span{
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
  }
}

.show-aviary .image-wrapper:after {
  content: "";
  position: absolute;

  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.08) 57%, rgba(0, 0, 0, 0.15) 62%, rgba(0, 0, 0, 0.72) 85%, rgba(0, 0, 0, 0.97) 95%, rgb(0, 0, 0) 100%);
  background-image: url("/plugins/AviaryMedia/imgs/play-overlay.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 25% 25%;
}

.item-link .unavailable {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  padding: 1.5rem;
  background-color: rgba(0, 0, 0, 0.9) !important;
  color: #ffffff;
  font-family: "IBM Plex Mono", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.2rem;
  opacity: 0;
}

.item-link .active {
  opacity: 1;
}

.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.visually-hidden:not(caption),
.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption) {
  position: absolute !important;
}