/*
* Barebones V3
* Copyright 2019 Steve Cochran
*
* Based of Skeleton by Dave Gamache
*
* Free to use under the MIT license.
*/

/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Media Breakpoints
- Variables
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/

/* ENV Variables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Media breakpoint variables for use in media queries
* 	Note: this section is currently commented out pending release of 
* 	final CSS env() spec
*  Breakpoints based on 
*	 https://medium.freecodecamp.org/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862
* 
*/

/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* CSS Grid depends much more on CSS than HTML, so there is less boilerplate
	 than with skeleton. Only basic 1-4 column grids are included.
	 Any additional needs should be made using custom CSS directives */


.grid-container {
	position: relative;
	max-width: var(--grid-max-width);
	margin: 0 auto;
	padding: 20px;
	display: grid;
    row-gap: 1em;
	/* grid-gap: 20px;
	gap: 20px; */
	
	/* by default use min 200px wide columns auto-fit into width */
	/* grid-template-columns: minmax(200px, 1fr); */
}

/* grids to 3 columns above mobile sizes */

	.grid-container {
		grid-template-columns: 42% 16% 42%;
		padding: 10px 0;

	
	/* basic grids */
	.grid-container.fifths {
		grid-template-columns: repeat(5, 1fr);
	}
	.grid-container.quarters {
		grid-template-columns: repeat(4, 1fr);
	}
	.grid-container.thirds {
		grid-template-columns: 42% 16% 42%;
	}
	.grid-container.halves {
		grid-template-columns: repeat(2, 1fr);
	}
	.grid-container.full {
		grid-template-columns: 1fr;
	}
	
}

/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }
.u-align-left {
	text-align: left; }
.u-align-right {
	text-align: right; }


/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid var(--border-color-softer); } */


/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Larger than mobile (default point when grid becomes active) */
/* @media (min-width: 600px) {} */

/* Larger than phablet */
/* @media (min-width: 900px) {} */

/* Larger than tablet */
/* @media (min-width: 1200px) {} */