.section-icons[data-icons-slider] {
  --dots-container-background: #e9e9e9;
  --dot-backgrond: #00000080;
  --dot-active-background: #000000;
  --dot-size: 5px;
  & .icon-slider-container {
    position: relative;
  }

  & .slider-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    padding: 16px 32px;
    border-radius: 100px;
    background-color: var(--dots-container-background);
    width: fit-content;
  }

  & .slider-dot {
    width: var(--dot-size);
    height: var(--dot-size);
    border-radius: 50%;
    border: none;
    background-color: var(--dot-backgrond);
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  & .slider-dot.active,
  & .slider-dot:hover {
    background-color: var(--dot-active-background);
  }

  /* Hide dots on larger screens if needed */
  @media (min-width: 768px) {
    & .icon-slider-container .slider-dots {
      display: none;
    }
    & .grid__item {
      margin-bottom: 62px;
    }
  }
}