aSkelly/css/grid.css

/* https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/ */
/* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
/* https://stackoverflow.com/a/45059944 */
/* Flex grid, done similarly to a float: left. So content needs to be within the grid */
/* -ms-grid-columns: 1fr (20px 1fr)[3]; */
/* grid-template-columns: 1fr repeat(3, 20px 1fr); */
/* Would prefer to use grid, but there's less support for earlier browsers, so using flex (for now) */

html{
  font-size: 18px; /* rem based on this (root element), em is based on the parent element of wherever the change is */
}

:root {
  --sm: 0;
  --md: 0;
  --lg: 0;
}
:root {
  --active-brightness: 0.85;
  --border-radius: 8px;
  --box-shadow: 0px 2px 8px;
  --color-accent: #dae9f6;
  --color-bg: #fff;
  --color-bg-secondary: #e9e9e9;
  --color-link: #118bee;
  --color-secondary: #508ce2;
  --color-secondary-accent: #dee9fa;
  --color-shadow: #f4f4f4;
  --color-table: #118bee;
  --color-text: #000;
  --color-text-secondary: #999;
  --color-scrollbar: #cacae8;
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --hover-brightness: 1.2;
  --justify-important: center;
  --justify-normal: left;
  --line-height: 1.5;
  --width-card: 285px;
  --width-card-medium: 460px;
  --width-card-wide: 800px;
  --width-content: 1080px;
}
@media (prefers-color-scheme: dark) {
  :root[color-mode="user"] {
      --color-accent: #0097fc;
      --color-bg: #333;
      --color-bg-secondary: #555;
      --color-link: #0097fc;
      --color-secondary: #e20de9;
      --color-secondary-accent: #e20de9;
      --color-shadow: #bbbbbb20;
      --color-table: #0097fc;
      --color-text: #f7f7f7;
      --color-text-secondary: #aaa;
  }
}

.container{
  margin: 0 auto;
  max-width: var(--width-content);
  padding: 1.4rem 1rem;
  /* overflow: auto; */
}
.container--no-topgap{
  padding-top: 0;
}
.container--no-botgap{
  padding-bottom: 0;
}
.container--no-gap{
  /* Still has right/left padding, otherwise page looks odd. Can be omitted with no-padd */
  padding-bottom: 0;
  padding-top: 0;
}


.row {
  position: relative;
  width: 100%;

  display: flex;
  flex-wrap: wrap;
  align-items: flex-start; 
  flex-direction: row;
  row-gap: 1.25rem; /* In-case of flex-wrap content, space it out. Padding left+right */
}

.row+.row{
  margin-top: 1.4rem;
}

/* To make (first level) elements fit within the flex container (h1s, paras, etc. don't use all space by default) */
/* Would use :not(x y z) for exceptions, but no i.e. support, and poor support on "older" browsers */
/* .col>*{ */
.col>address, .col>article, .col>aside, .col>blockquote, .col>canvas, .col>dd, .col>div, .col>dl, .col>dt, .col>fieldset, .col>figcaption,
.col>figure, .col>footer, .col>form, .col>h1, .col>h2, .col>h3, .col>h4, .col>h5, .col>h6, .col>header, .col>hr, .col>li, .col>main,
.col>main, .col>nav, .col>noscript, .col>ol, .col>p, .col>pre, .col>section, .col>table, .col>tfoot, .col>ul, .col>video{
  width: 100%;
}
/* inline elements */
.col img{
  max-width: 100%;
  height: auto;
  margin-right: auto;
  margin-left: auto;
}


/* Col elements with row should be flex elements to allow flex (eg. section, etc are block by default) */
/* MAYBE REMOVE THIS, IF YOU WANT ROW FUNCTIONALITY IN A ROW, ADD ANOTHER ROW!!! */
.row [class^="col"]{
  padding-right: 0.625rem; /* ~20px gap = 20/16(html size)  / 2(as 2 elems next to each other should equat the gap = 0.62625 */
  padding-left: 0.625rem; /* In place of gap, so it can be full width rows */

  /* display: flex; */
  /* flex-wrap: wrap; */
  min-height: 0.125rem;
}


.row--scroll{
  flex-wrap: nowrap;
  overflow-x: scroll; /* Used instead of auto, as auto changed the height of elements if a tabgroup toggled */
  justify-content: left;
  /* Scrollbar stuff */
  scrollbar-color: #444 transparent;
  scrollbar-width: thin;
  padding-bottom: .5rem;
}
.row--scroll [class^="col"]{

}

.col{
  flex: 0 0 auto;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
  flex: 0 0 100%;
}

/* (100/12) * x = the flex % */
.col-sm-1 { flex: 0 0 8.33%; }
.col-sm-2 { flex: 0 0 16.66%; }
.col-sm-3 { flex: 0 0 25%; }
.col-sm-3p5 { flex: 0 0 29.166%; } /* 3 point 5, example for scroll-off page */
.col-sm-4 { flex: 0 0 33.33%; }
.col-sm-5 { flex: 0 0 41.66%; }
.col-sm-6 { flex: 0 0 50%; }
.col-sm-7 { flex: 0 0 58.33%; }
.col-sm-8 { flex: 0 0 66.66%; }
.col-sm-9 { flex: 0 0 75%; }
.col-sm-10 { flex: 0 0 83.33%; }
.col-sm-11 { flex: 0 0 91.66%; }
.col-sm-12 { flex: 0 0 100%; }

.hidden-sm {
  display: none;
}

@media only screen and (min-width: 33.75rem) {  /* ~540px */
}

@media only screen and (min-width: 45rem) {  /* ~720px */
  .col-1 { flex: 0 0 8.33%; }
  .col-2 { flex: 0 0 16.66%; }
  .col-3 { flex: 0 0 25%; }
  .col-3p5 { flex: 0 0 29.166%; } /* 3 point 5, example for scroll-off page */
  .col-4 { flex: 0 0 33.33%; }
  .col-5 { flex: 0 0 41.66%; }
  .col-6 { flex: 0 0 50%; }
  .col-7 { flex: 0 0 58.33%; }
  .col-8 { flex: 0 0 66.66%; }
  .col-9 { flex: 0 0 75%; }
  .col-10 { flex: 0 0 83.33%; }
  .col-11 { flex: 0 0 91.66%; }
  .col-12 { flex: 0 0 100%; }

  .hidden-sm { display: block; }
}

@media only screen and (min-width: 60em) { /* ~960px */
}

/* Try to avoid !important, have each rule set to keep track of */
.no-padd, .row.no-padd [class^="col"], .row [class^="col"].no-padd{
  padding: 0; /* In-case elements want to be full-width, touching, etc */
}

.row--align-center{ align-items: center;}
.col--align-center{ align-self: center; align-self: anchor-center}

/* Sort into col/sm areas with media queries */
.col-grow, .col-grow-sm
,.col-fill, .col-fill-sm{
  flex-grow: 1;
}