img,
video {
  border-radius: var(--rounded-corner);
  box-shadow: var(--shadow);
  display: block;
  margin: 2rem auto;
  max-width: 100%;

  &.full {
    width: 100%;
  }
  
  &.pixels {
    image-rendering: pixelated;
  }
  
  &.transparent {
    border-radius: 0;
    box-shadow: none;
  }

  &.inline {
    display: inline;
  }

  &.no-margin {
    margin: 0;
  }
}

img {
  transition: var(--transition-longer);

  &:not(.no-hover) {
    cursor: zoom-in;
  }

  &:not(.no-hover):hover {
    border-radius: 0;
    box-shadow: var(--shadow-raised);
    transform: scale(1.1);
  }
}