/*
 * 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
***********************************************/

/***** Cards *****/
.card                                          	{ margin:0; padding:0; width:100%; background-color:var(--color-ui-0); box-shadow:var(--border-default); border-radius:var(--radius-md); position:relative; transition:all 0.2s ease; }

/***** Header *****/
.card__header                                  	{ padding:var(--space-4); border-radius:var(--radius-md) var(--radius-md) 0 0; background-color:var(--color-ui-200); box-shadow:var(--border-default); }

/***** Body *****/
.card__body                                    	{ padding:var(--space-4); display:flex; flex-direction:column; gap:var(--space-3); }

/***** Footer *****/
.card__footer                                  	{ margin-top:auto; padding:var(--space-4); border-radius:0 0 var(--radius-md) var(--radius-md); }

/***** Tables *****/
.card--hasTable 																{
	.card__body                     							{ padding:0; }
	table th                                			{ border-radius:var(--radius-md) var(--radius-md); 0 0; }
	table tr:last-child td:first-child      			{ border-radius:0 0 0 var(--radius-md); }
	table tr:last-child td:last-child       			{ border-radius:0 0 var(--radius-md) 0; }
}

/***** List Cards *****/
.cards                                          { padding-inline-start:0; list-style:none; display:grid; grid-template-columns:repeat( auto-fit, minmax(300px, 1fr) ); grid-gap:24px; width:100%; }
.cards li                                       { margin:0; padding:0; display:flex; flex-direction:column; background-color:var(--color-ui-0); box-shadow:var(--border-default); border-radius:var(--radius-md); position:relative; transition:all 0.2s ease; }

/***** Hover *****/
.cards--hover li:hover                          { box-shadow:var(--border-hover); transition:all 0.2s ease; }

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

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

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