.snippet--img-right {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gap-x, 1rem);
  padding-inline: var(--grid-padding-x);
  margin-bottom: var(--grid-padding-x, 1rem);

  p {
    margin-top: 1rem;
    font-size: 1rem;
    font-weight: 600;

    &:is(body.data-editor *) {
      min-height: 1.5rem;
    }
  }

  img {
    width: 100%;
  }

  [data-protected] {
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  @media screen and (max-width: 800px) {
    & {
      grid-template-columns: 1fr;

      [data-protected] {
        display: none;
      }
    }
  }
}