.cux-image-gallery-card {
  &:not(:last-child) {
    margin-bottom: $margin-normal;

    @include breakpoint(sm) {
      margin-bottom: $margin-double;
    }
  }

  figure {
    position: relative;
  }

  [class^='ratio-'],
  [class*=' ratio-'] {
    z-index: 1;

    img {
      width: 100%;
    }
  }

  figcaption {
    position: relative;
    z-index: 2;
  }

  .description {
    padding-top: $margin-half;
    margin: 0;

    &:empty {
      display: none;
    }
  }

  .gallery-index {
    position: absolute;
    right: $margin-normal;
    top: -$margin-quadruple;
    border-radius: $border-radius-normal;
    padding: $margin-half $margin-normal;
    z-index: 2;
    background: rgba($color-white, .8);
    color: $color-grey;
  }

  strong {
    color: $color-blue-500;
  }
}