/**
 * Bridge service responsive rules.
 */

@media (max-width: 820px) {
  .ai-bridge-overview,
  .ai-bridge-case,
  .ai-bridge-logistics {
    grid-template-columns: 1fr;
  }

  .ai-bridge-overview {
    gap: 36px;
  }

  .ai-bridge-categories {
    grid-template-columns: 1fr 1fr;
  }

  .ai-bridge-categories article:last-child {
    grid-column: 1/-1;
  }

  .ai-bridge-project-grid {
    grid-template-columns: 1fr;
  }

  .ai-bridge-case figure img {
    max-height: 520px;
  }

  .ai-bridge-connection {
    min-height: 420px;
  }
}

@media (max-width: 560px) {
  .ai-wide-model {
    min-height: 330px;
  }

  .ai-service--bridge .ai-section {
    padding: 58px 0;
  }

  .ai-service--bridge .ai-bridge-overview {
    gap: 28px;
  }

  .ai-service--bridge .ai-prose p {
    font-size: var(--ai-type-body-size);
    line-height: 1.7;
  }

  .ai-service--bridge .ai-bridge-scope {
    border-radius: 18px;
    padding: 22px;
  }

  .ai-service--bridge .ai-bridge-categories {
    gap: 12px;
    grid-template-columns: 1fr;
    margin-top: 30px;
  }

  .ai-service--bridge .ai-bridge-categories article,
  .ai-service--bridge .ai-bridge-categories article:last-child {
    grid-column: auto;
    padding: 22px;
  }

  .ai-service--bridge .ai-bridge-categories span {
    min-height: 0;
  }

  .ai-service--bridge .ai-bridge-case {
    border-radius: 18px;
    margin-top: 32px;
  }

  .ai-service--bridge .ai-bridge-case figure img {
    aspect-ratio: 4/3;
  }

  .ai-service--bridge .ai-bridge-case figcaption {
    bottom: 12px;
    left: 12px;
  }

  .ai-service--bridge .ai-bridge-facts {
    padding: 26px 22px;
  }

  .ai-service--bridge .ai-bridge-project-grid {
    gap: 14px;
  }

  .ai-service--bridge .ai-bridge-project {
    border-radius: 17px;
  }

  .ai-service--bridge .ai-bridge-project > div {
    padding: 22px;
  }

  .ai-service--bridge .ai-bridge-project dl {
    grid-template-columns: 1fr;
  }

  .ai-service--bridge .ai-bridge-logistics {
    margin-top: 30px;
  }

  .ai-service--bridge .ai-bridge-sequence {
    padding: 10px 20px;
  }

  .ai-service--bridge .ai-bridge-connection {
    min-height: 330px;
  }

  .ai-service--bridge .ai-bridge-deliverables {
    gap: 12px;
    margin-top: 14px;
  }
}