.icon-grid {
  padding: var(--padding-XL);
  background-color: var(--color-white); 
  gap: var(--padding-XL); 

    h3 {
    color: var(--color-text); 
    opacity: var(--opacity-active);
    text-align: center;
    }
}

.icon-grid__inner {
  display: flex;
  flex-direction: column;
  gap: var(--padding-XL);
}

.icon-grid__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--padding-M);
  justify-content: center;
}

.icon-grid__item {
  background:var(--color-cloudgrey);
  padding: var(--padding-M);
  border-radius: var(--radius-M);
  text-align: center;
}


.icon-grid__icon img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  justify-self: center;
}

/* Farbvarianten */
.icon-grid--white {
  background-color: var(--color-white);
}

.icon-grid--lightsage {
  background-color: var(--color-lightsage);

  .icon-grid__item {
    background:var(--color-white);
  }
}

.icon-grid--dark {
  background-color: var(--color-deepgreen);
    h2{
    color: var(--color-freshgreen);
    }
    h4{
    color: var(--color-white);
    opacity: 1;
    }
    p{
    color: var(--color-white);
    }
}

/* Responsiv */
@media (max-width: 45rem) {
  .icon-grid {
    padding: var(--padding-M);  
  }
  .icon-grid__inner {
    gap: var(--padding-L); 
  }
  .icon-grid__items {
    gap: var(--padding-S);
  }
}