/*
 * Logo Grid block - structural layout, plus the greyscale filter below.
 * Columns and gap are set inline from field values (pulled from the theme's
 * spacing scale); colors are the theme's responsibility. Responsive
 * top/bottom padding is handled by the shared .wp-block-prontoblocks-section
 * rule in assets/css/blocks.css.
 */

.wp-block-prontoblocks-logo-grid__eyebrow {
  margin: 0 0 0.5rem;
}

.wp-block-prontoblocks-logo-grid__eyebrow--align-left,
.wp-block-prontoblocks-logo-grid__title--align-left {
  text-align: left;
}

.wp-block-prontoblocks-logo-grid__eyebrow--align-center,
.wp-block-prontoblocks-logo-grid__title--align-center {
  text-align: center;
}

.wp-block-prontoblocks-logo-grid__eyebrow--align-right,
.wp-block-prontoblocks-logo-grid__title--align-right {
  text-align: right;
}

.wp-block-prontoblocks-logo-grid__title {
  margin: 0 0 2rem;
}

.wp-block-prontoblocks-logo-grid__list {
  display: grid;
  grid-template-columns: repeat(var(--prontoblocks-logo-grid-columns, 4), minmax(0, 1fr));
  gap: var(--prontoblocks-logo-grid-gap, 1rem);
  align-items: center;
}

.wp-block-prontoblocks-logo-grid__item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.wp-block-prontoblocks-logo-grid__image {
  max-width: 100%;
  height: auto;
}

.wp-block-prontoblocks-logo-grid--greyscale .wp-block-prontoblocks-logo-grid__image {
  filter: grayscale(100%);
}