/*
 * 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
***********************************************/
.grid                                           { display:grid; gap:var(--space-4); grid-template-columns:1fr; width:100%; max-width:1200px; margin-inline:auto; }
.grid--fluid                                    { max-width:100%; }
.grid--auto                                     { grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); }

/***** Grid Item *****/
.grid__item                                     { grid-column:span 1; display:flex; flex-direction:column; gap:var(--space-4); order:0; }

/***** Alignment Utilities *****/
.grid--align-center                             { align-items:center; }
.grid--align-start                              { align-items:start; }
.grid--align-end                                { align-items:end; }
.grid--justify-center                           { justify-items:center; }
.grid--justify-start                            { justify-items:start; }
.grid--justify-end                              { justify-items:end; }

/***** Global ordering *****/
.grid__item--alignStart                         { order:-1; }
.grid__item--alignEnd                           { order:999; }


/***********************************************
Tablet - This applies from 750px onwards
***********************************************/
@media (min-width:750px)                        {
  .grid                                         { grid-template-columns:repeat(12, minmax(0, 1fr)); }
  .grid__item                                   { grid-column:span 12; }

  .grid__item--span-1                           { grid-column:span 1; }
  .grid__item--span-2                           { grid-column:span 2; }
  .grid__item--span-3                           { grid-column:span 3; }
  .grid__item--span-4                           { grid-column:span 4; }
  .grid__item--span-5                           { grid-column:span 5; }
  .grid__item--span-6                           { grid-column:span 6; }
  .grid__item--span-7                           { grid-column:span 7; }
  .grid__item--span-8                           { grid-column:span 8; }
  .grid__item--span-9                           { grid-column:span 9; }
  .grid__item--span-10                          { grid-column:span 10; }
  .grid__item--span-11                          { grid-column:span 11; }
  .grid__item--span-12                          { grid-column:span 12; }

  /***** Tablet override Grid 6 *****/
  .grid.grid--6                                 { grid-template-columns:repeat(6, 1fr); }
  .grid.grid--6 .grid__item--span-1             { grid-column:span 1; }
  .grid.grid--6 .grid__item--span-2             { grid-column:span 2; }
  .grid.grid--6 .grid__item--span-3             { grid-column:span 3; }
  .grid.grid--6 .grid__item--span-4             { grid-column:span 4; }
  .grid.grid--6 .grid__item--span-5             { grid-column:span 5; }
  .grid.grid--6 .grid__item--span-6             { grid-column:span 6; }
  .grid.grid--6 .grid__item--span-7,
  .grid.grid--6 .grid__item--span-8,
  .grid.grid--6 .grid__item--span-9,
  .grid.grid--6 .grid__item--span-10,
  .grid.grid--6 .grid__item--span-11,
  .grid.grid--6 .grid__item--span-12            { grid-column:span 6; }

  /***** Tablet override Grid 8 *****/
  .grid.grid--8                                 { grid-template-columns:repeat(8, 1fr); }
  .grid.grid--8 .grid__item--span-1             { grid-column:span 1; }
  .grid.grid--8 .grid__item--span-2             { grid-column:span 2; }
  .grid.grid--8 .grid__item--span-3             { grid-column:span 3; }
  .grid.grid--8 .grid__item--span-4             { grid-column:span 4; }
  .grid.grid--8 .grid__item--span-5             { grid-column:span 5; }
  .grid.grid--8 .grid__item--span-6             { grid-column:span 6; }
  .grid.grid--8 .grid__item--span-7             { grid-column:span 7; }
  .grid.grid--8 .grid__item--span-8             { grid-column:span 8; }
  .grid.grid--8 .grid__item--span-9,
  .grid.grid--8 .grid__item--span-10,
  .grid.grid--8 .grid__item--span-11,
  .grid.grid--8 .grid__item--span-12            { grid-column:span 8; }

  /***** Offsetting *****/
  .grid__item--start-1                          { grid-column:2; }
  .grid__item--start-2                          { grid-column:3; }
  .grid__item--start-3                          { grid-column:4; }
  .grid__item--start-4                          { grid-column:5; }
  .grid__item--start-5                          { grid-column:6; }
  .grid__item--start-6                          { grid-column:7; }
  .grid__item--start-7                          { grid-column:8; }
  .grid__item--start-8                          { grid-column:9; }
  .grid__item--start-9                          { grid-column:10; }
  .grid__item--start-10                         { grid-column:11; }
  .grid__item--start-11                         { grid-column:12; }

  .grid__item--span-1                           { grid-column-end: span 1; }
  .grid__item--span-2                           { grid-column-end: span 2; }
  .grid__item--span-3                           { grid-column-end: span 3; }
  .grid__item--span-4                           { grid-column-end: span 4; }
  .grid__item--span-5                           { grid-column-end: span 5; }
  .grid__item--span-6                           { grid-column-end: span 6; }
  .grid__item--span-7                           { grid-column-end: span 7; }
  .grid__item--span-8                           { grid-column-end: span 8; }
  .grid__item--span-9                           { grid-column-end: span 9; }
  .grid__item--span-10                          { grid-column-end: span 10; }
  .grid__item--span-11                          { grid-column-end: span 11; }
  .grid__item--span-12                          { grid-column-end: span 12; }
}


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


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

}


/***********************************************
Tablet ONLY - This applies from 750px to 992px
***********************************************/
@media only screen and (min-width:750px) and (max-width:1000px) {

}


/***********************************************
Mobile ONLY - This applies from 0px to 749px
***********************************************/
@media only screen and (max-width:749px)        {
  .grid__item--alignStartMobile                 { order:-1; }
  .grid__item--alignEndMobile                   { order:999; }
}