/*----------------------------------------------*\
    BLOCK - Fancy List
	==================

	@package theorder

\*----------------------------------------------*/
/*----------------------------------------------*\
    COMPONENTS
	==========

	@package theorder

\*----------------------------------------------*/
/*
 *
 * / Variables
------------------------------------------------*/
/* Breakpoints */
/* Responsive type multipliers */
/* Type sizes (Minor third) */
/* Max-widths */
/* is used for calculation for extend width. Each side is extended by x ems */
.fancy-list {
  padding: 0 var(--size-100);
  margin-bottom: var(--size-700);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: var(--max-width-narrow); }
  .fancy-list--columns {
    max-width: var(--max-width-wide); }
  .fancy-list__heading {
    font-family: var(--font-sans);
    text-transform: uppercase;
    color: var(--color-headings-5);
    text-align: center;
    margin-bottom: var(--size-300);
    max-width: var(--max-width-narrow); }
  .fancy-list__list {
    border: 1px solid var(--color-faint-lines);
    padding: var(--size-50) 0; }
    @media screen and (min-width: 27rem), print {
      .fancy-list--columns .fancy-list__list ul {
        display: grid;
        grid-template-columns: repeat(2, 50%);
        padding: var(--size-400);
        padding-left: 0; } }
    @media screen and (min-width: 48rem), print {
      .fancy-list--columns .fancy-list__list ul {
        grid-template-columns: repeat(3, 33.33%); } }
    .fancy-list__list li {
      font-size: var(--size-300);
      list-style-image: url(../../../images/li-style.svg);
      list-style-position: outside;
      margin-left: 4em;
      padding: var(--size-200);
      word-break: break-word; }
    .fancy-list__list a {
      display: block;
      text-decoration: none; }
      .fancy-list__list a:hover {
        -webkit-text-decoration: underline 1px;
                text-decoration: underline 1px;
        text-underline-offset: .2em; }