img.responsive {
  width: 100%;
  height: auto;
}

img.site-favicon {
  display: inline-block;
  width: auto;
  height: 1em;
  line-height: 1;
}

img.site-app-icon {
  display: block;
  width: 100%;
  max-width: 256px;
  height: auto;
  border-radius: 20px;

  height: auto;
  margin-left: auto;
  margin-right: auto;
  border: solid 1px #4a4a4a;
  background-color: #000000;
}

img.site-profile-picture {
  display: block;
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  border-radius: 8px;
  background-color: #8a8a8a;
}

img.site-channel-icon {
  display: block;
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  border-radius: 8px;
  background-color: #8a8a8a;
}

img.site-app-icon,
img.site-channel-icon,
img.site-profile-picture {
  &.sb-xxsmall {
    max-width: 32px;
  }
  &.sb-xsmall {
    max-width: 48px;
  }
  &.sb-list-item {
    max-width: 48px;
  }
  &.sb-navbar {
    max-width: 48px;
  }
  &.sb-small {
    max-width: 64px;
  }
  &.sb-medium {
    max-width: 128px;
  }
  &.sb-large {
    max-width: 256px;
  }
  &.sb-full {
    max-width: 512px;
  }
}
