/* Sharing page. Layout comes from getting-started.css (.gs-* classes are the
   shared secondary-page shell); only the sharing-specific pieces live here. */

.sh-cards {
  gap: var(--dl-layout-space-oneandhalfunits, 24px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.sh-card {
  padding: var(--dl-layout-space-twounits, 32px);
  border-radius: var(--dl-layout-radius-cardradius, 8px);
  background-color: var(--dl-color-template-gray-200, #EFF0F2);
}

.sh-card-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: var(--dl-layout-space-halfunit, 8px);
}

.sh-card-text {
  color: var(--dl-color-gray-700, #999999);
  line-height: 24px;
}

.sh-logos {
  gap: var(--dl-layout-space-twounits, 32px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

/* .pill already supplies the white rounded chip; drop its trailing margin so the
   row sits tight against the note underneath. */
.sh-logo-pill {
  margin-bottom: 0;
}

.sh-note {
  color: var(--dl-color-gray-700, #999999);
  line-height: 24px;
  margin-top: var(--dl-layout-space-twounits, 32px);
}

@media (max-width: 767px) {
  .sh-logos {
    gap: var(--dl-layout-space-unit, 16px);
  }
}