img.cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.row>div:has(img.cover) {
  overflow: hidden;
  position: relative;

  >div:has(+ img) {
    width: 100%;
    height: 100%;
  }
}

.image-popup.ui-dialog:not(.ui-dialog-off-canvas) {
  max-width: 90%;

  video {
    width: 100%;
    height: auto;
  }
}

.image {
  &.shape-square>img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }

  &.shape-circle>img {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
  }

  &.shape-16-9>img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  &.shape-4-3>img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  &.shape-3-2>img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }

  &.shape-2-1>img {
    aspect-ratio: 2 / 1;
    object-fit: cover;
  }

  &.shape-3-1>img {
    aspect-ratio: 3 / 1;
    object-fit: cover;
  }

  &.shape-9-16>img {
    aspect-ratio: 9 / 16;
    object-fit: cover;
  }

  &.shape-3-4>img {
    aspect-ratio: 3 / 4;
    object-fit: cover;
  }

  &.shape-2-3>img {
    aspect-ratio: 2 / 3;
    object-fit: cover;
  }

  &.shape-1-2>img {
    aspect-ratio: 1 / 2;
    object-fit: cover;
  }

  &.shape-1-3>img {
    aspect-ratio: 1 / 3;
    object-fit: cover;
  }

  &.h-100>img {
    width: 100%;
    height: 100%;
    max-width: unset;
    object-fit: cover;
  }
}