.docs-integration-brand { display: grid; box-sizing: border-box; place-items: center; overflow: hidden; border: 1px solid #c9e2ec; border-radius: 15px; background: #fff; box-shadow: 0 8px 20px rgba(6, 77, 110, .08); }
.docs-integration-brand img { display: block; width: 100%; max-width: 100%; height: 100%; max-height: 100%; object-fit: contain; }
.docs-integration-brand__fallback { display: grid; width: 100%; height: 100%; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(145deg, var(--docs-primary-bright), var(--docs-primary)); font: 800 1.45rem var(--docs-heading); letter-spacing: -.04em; }
.docs-integration-brand--card { width: 124px; height: 66px; padding: 11px 13px; }
.docs-integration-brand--card .docs-integration-brand__fallback { width: 48px; height: 48px; justify-self: end; }
.docs-integration-brand--map { width: 78px; height: 48px; padding: 8px 10px; border-radius: 12px; box-shadow: none; }
.docs-integration-brand--map .docs-integration-brand__fallback { width: 34px; height: 34px; font-size: 1rem; }
.docs-integration-brand--hero { width: 190px; height: 80px; padding: 15px 20px; border-color: rgba(255, 255, 255, .34); border-radius: 18px; box-shadow: 0 15px 32px rgba(0, 12, 29, .2); }
.docs-integration-brand--hero .docs-integration-brand__fallback { width: 52px; height: 52px; font-size: 1.6rem; }

@media (max-width: 480px) {
    .docs-integration-brand--card { width: 105px; height: 60px; padding: 10px 11px; }
    .docs-integration-brand--map { width: 62px; height: 44px; padding: 7px 8px; }
    .docs-integration-brand--hero { width: 165px; height: 72px; }
}