/* Computer layout: content uses 92% of the viewport, with no fixed-width cap.
   Percentages size layout; rem/clamp keep text and controls readable. */
@media (min-width: 768px) {
  .page > * { padding-inline: 4% !important; }
  .columns { grid-template-columns: 48% 48%; column-gap: 4% !important; }
  .project-grid, .columns-3 { grid-template-columns: 32% 32% 32%; column-gap: 2% !important; }
  .columns-4 { grid-template-columns: 23.5% 23.5% 23.5% 23.5%; column-gap: 2% !important; }
  #content > .columns { grid-template-columns: 60% 36%; }
  h1 { font-size: clamp(2.25rem, 3.4vw, 4.75rem) !important; }
  h2 { font-size: clamp(1.875rem, 2.7vw, 3.5rem) !important; }
  #content > .columns > :last-child { align-self: center; }
  #content > .columns > :last-child:not([style*="flex-direction"]),
  #content [data-layer="Описание и действие"] > :first-child {
    font-size: clamp(1.125rem, 1.25vw, 1.75rem) !important;
    line-height: 1.55 !important;
  }
  .content-banner { padding: clamp(24px, 2.2vw, 40px); }
  .content-banner > :not(.banner-decoration) { width: 78% !important; }
  .content-banner .banner-title { font-size: clamp(1.75rem, 2.5vw, 3.5rem) !important; }
  .content-banner > a { width: fit-content !important; }
  [data-layer="Обращение / 2 колонки"] { grid-template-columns: 44% 52%; }
  #inquiry-form { max-width: none; padding: 28px !important; }
  [data-layer="Подвал / строка"] { display: grid !important; grid-template-columns: 18% 48% 30%; column-gap: 2% !important; }
}
@media (min-width: 1100px) {
  .content-banner > :not(.banner-decoration) { width: 70% !important; }
  .content-banner > a { width: fit-content !important; }
  .content-banner > .banner-art {
    display: block !important; position: absolute; right: 4%; top: 50%;
    width: 220px; height: 170px; transform: translateY(-50%); pointer-events: none;
  }
  .banner-art > * { transform: translate(calc(-1 * var(--origin-x)), calc(-1 * var(--origin-y))); }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .project-grid, .columns-3, .columns-4 { grid-template-columns: 49% 49%; }
  #content > .columns { grid-template-columns: 54% 42%; }
  [data-layer="Обращение / 2 колонки"] { grid-template-columns: 100%; }
}