/* ============================================
   Block: Responsive Image
   ============================================ */

.block-responsive-image {
  line-height: 0;

  &.container-wide {
    max-width: var(--max-width-wide);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  &.container-default {
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  &.container-narrow {
    max-width: var(--max-width-narrow);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  & img {
    width: 100%;
    height: auto;
    display: block;
  }

  & .show-tablet,
  & .show-mobile {
    display: none;
  }

  @media (max-width: 1024px) {
    & .show-desktop { display: none; }
    & .show-tablet  { display: block; }
    & .show-mobile  { display: none; }
  }

  @media (max-width: 768px) {
    & .show-desktop { display: none; }
    & .show-tablet  { display: none; }
    & .show-mobile  { display: block; }
  }
}