/*
 * Amazium CSS Framework
 * https://amazium.co.uk
 *
 * A lightweight, modern CSS framework built with Grid & Flexbox.
 * Designed and maintained by Mike Ballan.
 *
 * Licensed under MIT (https://opensource.org/licenses/MIT)
 */

/***********************************************
Mobile First - This applies from 0px to 749px
***********************************************/

/***** List *****/
.list                                           { margin-left:0; padding:0; list-style:none; width:100%; display:flex; flex-direction:column; }
*+.list, .list+* 												        { margin-top:20px; }

/***** List - Simple *****/
.list--simple 																	{ gap:var(--space-4);
	li										            						{ margin:0; padding:0; display:flex; gap:var(--space-2); flex-direction:column; }
}

.list--inlineChild li														{ flex-direction:row; }

.list--links                                    { margin-top:50px; display:flex; gap:16px; flex-direction:column;
  li                                            { 
    a                                           { padding:16px; text-decoration:none; display:flex; background-color:var(--color-brand-300); font-weight:bold; border-radius:var(--radius-md); align-items: center;
      &:hover                                   { background-color:var(--color-brand-600); color:var(--color-ui-0); }
    }
    .icon                                       { margin-left:auto; }
  }
}

.list--quote                                    { display:flex; flex-direction:column; gap:40px;
  li                                            { display:flex; flex-direction:column; gap:20px; }
}

/***********************************************
Tablet - This applies from 750px onwards
***********************************************/
@media (min-width:750px)                        {
  
}


/***********************************************
Screen - This applies from 1200px onwards
***********************************************/
@media (min-width:1200px) {
  .list--quote                                  { display:grid; grid-template-columns:repeat(2, 1fr); }
}


/***********************************************
Desktop HD
***********************************************/
@media (min-width:1440px)                       {

}