img {
  display: block;
  margin: 1rem auto;
  // do not set width, so user can custom image width by tag attribute
  max-width: 92%;
  max-height: 600px;
  border-radius: 0.2rem;
  transition: 0.4s;

  // ref tailwindcss shadow-default
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0/0.1), 0 1px 2px -1px rgb(0 0 0/0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

  &:hover {
    // shadow-md
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0/0.1), 0 2px 4px -2px rgb(0 0 0/0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  }

  &::before {
    content: '「 LOADING ERROR 」';
  }

  &[align='right'] {
    margin-left: 1rem;
    margin-right: 0.5rem;
  }

  &[align='left'] {
    margin-left: 0.5rem;
    margin-right: 1rem;
  }
}

img + em {
  display: block;
  text-align: center;
  color: var(--smc-c-text-light, #333);
  font-size: 0.9rem;
}

iframe {
  display: flex;
  width: 92%;
  margin: auto;
  border-radius: 0.2rem;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  transition: 0.4s;

  &:hover {
    box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.12);
  }
}

@media screen and (min-width: 1600px) {
  img {
    max-width: 800px;
  }
}

video {
  margin: auto;
}