.section-icons__grid {
  display: grid;
  grid-template-columns: repeat(var(--icons-desktop-columns), minmax(0, 1fr));
  gap: 10px;
}

.section-icons__carousel {
  max-width: 100%;
}

.section-icons__carousel-track {
  gap: 16px;
}

.section-icons__carousel-slide {
  flex: 0 0
    calc(
      (100% - (var(--icons-mobile-columns) - 1) * 16px) /
        var(--icons-mobile-columns)
    );
}

.section-icons__title {
  padding-top: 20px;
  line-height: 1.2;
}

.section-icons__item {
  display: flex;
  justify-content: center;
}

.section-icons__content--fit-content {
  width: fit-content;
  margin: 0 auto;
}

.section-icons__image {
  width: min(100%, var(--icons-image-width));
  height: auto;
  max-width: 100%;
  aspect-ratio: var(--icons-image-ratio);
  object-fit: var(--icons-image-fit);
}

.section-icons {
  margin-bottom: 36px;
}

.section-icons__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
}

.section-icons__indicator {
  min-width: 56px;
  text-align: center;
}

.section-icons__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: transparent;
  border: 0;
}

.section-icons__button--previous svg {
  transform: rotate(180deg);
}

@media screen and (max-width: 959px) {
  .section-icons__grid {
    grid-template-columns: repeat(var(--icons-mobile-columns), minmax(0, 1fr));
  }
  .section-icons {
    margin-bottom: 27px;
  }
}