.official-brand-proof {
  align-items: center;
  background: linear-gradient(135deg, #f4fbf8 0%, #ffffff 55%, #fff5f6 100%);
  border: 1px solid #cfe4da;
  border-left: 4px solid #138a5b;
  border-radius: 14px;
  color: #142033;
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 14px 16px;
}

.official-brand-proof--brand {
  margin: 18px auto 22px;
  max-width: 1180px;
}

.official-brand-proof--compact {
  margin: 12px 0 14px;
  padding: 11px 12px;
}

.official-brand-proof__icon {
  align-items: center;
  background: #e4f5ed;
  border-radius: 12px;
  color: #087a4d;
  display: inline-flex;
  font-size: 22px;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.official-brand-proof strong,
.official-brand-proof small {
  display: block;
}

.official-brand-proof strong {
  font-size: 15px;
  line-height: 1.35;
}

.official-brand-proof small {
  color: #5c6c80;
  line-height: 1.45;
  margin-top: 3px;
}

.official-brand-proof a {
  align-items: center;
  background: #122033;
  border-radius: 10px;
  color: #fff;
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  gap: 7px;
  justify-content: center;
  padding: 10px 13px;
  text-decoration: none;
  white-space: nowrap;
}

.official-brand-proof a:hover {
  background: #e11d3f;
  color: #fff;
}

@media (max-width: 720px) {
  .official-brand-proof {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .official-brand-proof a {
    grid-column: 1 / -1;
    width: 100%;
  }
}