/*
 * Icon List: the white card that holds Icon List Rows (a slot).
 * Figma "Eleken Site 2026": desktop 503:1883, tablet 503:3373, mobile 503:4949.
 *
 * This CSS lives inside the component's Shadow DOM. The rows are separate
 * components, each in its own Shadow DOM, so nothing here can style them; the
 * card only frames them.
 * Breakpoints follow Webflow: desktop ≥992 (base), tablet ≤991, mobile ≤767.
 */

:host {
  display: block;
}

.il,
.il *,
.il *::before,
.il *::after {
  box-sizing: border-box;
}

.il {
  padding: 40px 32px;
  border-radius: 6px;
  background-color: var(--colors--white, #fff);
}

/* Every row draws a dashed line in the 48px band above itself. Pulling the rows up
   by that band and clipping it hides the first row's line, whatever Webflow wraps
   the slotted rows in — so a row can be added, removed or moved without touching
   any setting. */
.il-clip {
  overflow: hidden;
}

.il-rows {
  margin-top: -48px;
}

@media screen and (max-width: 767px) {
  .il {
    padding: 24px 16px;
  }
}