@layer pages {
  .raw-content .with-modal {
    position: relative;
    display: inline-block;
    cursor: zoom-in;
  }

  .raw-content .with-modal::after {
    position: absolute;
    right: var(--space-2);
    bottom: var(--space-2);
    width: var(--space-8);
    height: var(--space-8);
    background-color: var(--color-text);
    content: '';
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 3a7 7 0 1 0 4.9 12l4.55 4.55 1.1-1.1L16 13.9A7 7 0 0 0 10 3Zm0 2a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm-.75 2v2.25H7v1.5h2.25V13h1.5v-2.25H13v-1.5h-2.25V7h-1.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0.65;
    pointer-events: none;
  }

  .article-image-dialog {
    width: min(90vw, var(--container-max));
    max-height: 90vh;
    margin: auto;
    padding: var(--space-4);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-raised);
  }

  .article-image-dialog::backdrop {
    background: var(--color-dark-deep-85);
  }

  .article-image-dialog img {
    width: 100%;
    max-height: calc(90vh - var(--space-16));
    object-fit: contain;
  }

  .article-image-dialog__close {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    display: grid;
    width: var(--space-10);
    height: var(--space-10);
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--color-dark-deep);
    color: var(--color-surface);
    font-size: var(--text-xl);
    cursor: pointer;
  }
  /* Общее оформление доверенного HTML статей и услуг. */
  .raw-content .blockquote {
    position: relative;
    margin-top: var(--space-12);
    padding: var(--space-10);
    border-radius: var(--radius-sm);
    background-color: var(--color-dark);
    background-image: url('../../img/sun-tornado.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--color-white-70);
    font-size: var(--text-lg);
  }

  .raw-content .blockquote.with-photo:has(.author-photo) {
    --raw-quote-photo-size: 9.375rem;
    --raw-quote-photo-overlap: 4.6875rem;

    margin-top: calc(var(--raw-quote-photo-overlap) + var(--space-6));
    padding-top: calc(var(--raw-quote-photo-overlap) + var(--space-4));
  }

  .raw-content .blockquote .author-photo {
    position: absolute;
    top: calc(-1 * var(--raw-quote-photo-overlap));
    width: var(--raw-quote-photo-size);
    height: var(--raw-quote-photo-size);
    margin: 0;
    border-radius: var(--radius-md);
    object-fit: cover;
  }

  .raw-content .blockquote :is(span, a, footer) {
    color: var(--color-surface);
  }

  .raw-content .blockquote footer {
    margin-top: var(--space-5);
  }

  .raw-content .blockquote cite {
    font-style: normal;
    font-weight: var(--font-weight-bold);
  }

  .raw-content .blockquote-footer::before {
    content: '— ';
  }

  .raw-content .author-role {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--font-weight-regular);
  }

  @media (max-width: 48rem) {
    .raw-content .blockquote {
      padding: var(--space-6);
    }
  }
}