@use "variables";

.single-image {
  cursor: zoom-in;
  display: block;
  overflow: hidden;
  height: 100%;
  .image {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
  }
  figcaption {
    font-size: .875rem;
    color: #999;
    border-radius: 0.3125rem;
  }
  &.is-circled {
    border-radius: 50%;
  }
  &.is-rounded {
    border-radius: 0.3125rem;
  }
  &.has-shadow {
    box-shadow: variables.$base-shadow;
  }
}

@media only screen and (max-width: 767px) {
  .single-image-pretty-box {
    padding: 1rem;
    .single-image {
      height: fit-content;
      figcaption {
        width: max(10%, 90%);
        margin: 0 auto;
        text-align: center;
        white-space: normal;
        word-break: break-word;
      }
    }
  }
}