/* Icons. Stroke-based on a 24x24 grid, inheriting currentColor so they behave like
   the Unicode glyphs they replaced -- but render identically on every platform. */

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  vertical-align: -.125em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Filled variants: rating stars, saved hearts, brand marks. */
.icon--filled { fill: currentColor; stroke: none; }

.icon--sm { width: .85em; height: .85em; }
.icon--lg { width: 1.35em; height: 1.35em; }

/* Icons that carry a section or card, rather than sitting inside a line of text. */
.icon--display {
  width: 1em;
  height: 1em;
  vertical-align: baseline;
  stroke-width: 1.5;
}

/* Social marks read better solid. */
.socials .icon { width: 15px; height: 15px; fill: currentColor; stroke: none; }