/* ================================================== */
/* WIDTH XS
/* ================================================== */


@media (min-width:400px){



	/* -------------------------------------------------- */
	/* grid gap
	/* -------------------------------------------------- */
	.grid[data-xs-gap="xxs"] > .grid-item {padding-bottom:var(--gap-xxs);}
	.grid[data-xs-gap="xs"] > .grid-item {padding-bottom:var(--gap-xs);}
	.grid[data-xs-gap="sm"] > .grid-item {padding-bottom:var(--gap-sm);}
	.grid[data-xs-gap="md"] > .grid-item {padding-bottom:var(--gap-md);}
	.grid[data-xs-gap="lg"] > .grid-item {padding-bottom:var(--gap-lg);}
	.grid[data-xs-gap="xl"] > .grid-item {padding-bottom:var(--gap-xl);}
	.grid[data-xs-gap="xxl"] > .grid-item {padding-bottom:var(--gap-xxl);}

	.grid > .grid-item.xs-last-row{padding-bottom:0;}

.xs-glr {
	padding-bottom: 0;
}



	/* ================================================== */
	/* padding/margin XXS
	/* ================================================== */

	.xs-pd-xxs > .cell-content,
	.xs-pd-t-xxs > .cell-content,
	.xs-pd-tb-xxs > .cell-content,
	.xs-mr-xxs,
	.xs-mr-t-xxs,
	.xs-mr-tb-xxs
	{padding-top: var(--xxs);}	

	.xs-pd-xxs > .cell-content,
	.xs-pd-b-xxs > .cell-content,
	.xs-pd-tb-xxs > .cell-content,
	.xs-mr-xxs,
	.xs-mr-b-xxs,
	.xs-mr-tb-xxs
	{padding-bottom: var(--xxs);}	

	.xs-pd-xxs > .cell-content,
	.xs-pd-l-xxs > .cell-content,
	.xs-pd-lr-xxs > .cell-content,
	.xs-mr-xxs,
	.xs-mr-l-xxs,
	.xs-mr-lr-xxs
	{padding-left: var(--xxs);}	

	.xs-pd-xxs > .cell-content,
	.xs-pd-r-xxs > .cell-content,
	.xs-pd-lr-xxs > .cell-content,
	.xs-mr-xxs,
	.xs-mr-r-xxs,
	.xs-mr-lr-xxs
	{padding-right: var(--xxs);}	


	/* ================================================== */
	/* padding/margin XS
	/* ================================================== */

	.xs-pd-xs > .cell-content,
	.xs-pd-t-xs > .cell-content,
	.xs-pd-tb-xs > .cell-content,
	.xs-mr-xs,
	.xs-mr-t-xs,
	.xs-mr-tb-xs
	{padding-top: var(--xs);}	

	.xs-pd-xs > .cell-content,
	.xs-pd-b-xs > .cell-content,
	.xs-pd-tb-xs > .cell-content,
	.xs-mr-xs,
	.xs-mr-b-xs,
	.xs-mr-tb-xs
	{padding-bottom: var(--xs);}	

	.xs-pd-xs > .cell-content,
	.xs-pd-l-xs > .cell-content,
	.xs-pd-lr-xs > .cell-content,
	.xs-mr-xs,
	.xs-mr-l-xs,
	.xs-mr-lr-xs
	{padding-left: var(--xs);}	

	.xs-pd-xs > .cell-content,
	.xs-pd-r-xs > .cell-content,
	.xs-pd-lr-xs > .cell-content,
	.xs-mr-xs,
	.xs-mr-r-xs,
	.xs-mr-lr-xs
	{padding-right: var(--xs);}	


	/* ================================================== */
	/* padding/margin SM
	/* ================================================== */

	.xs-pd-sm > .cell-content,
	.xs-pd-t-sm > .cell-content,
	.xs-pd-tb-sm > .cell-content,
	.xs-mr-sm,
	.xs-mr-t-sm,
	.xs-mr-tb-sm
	{padding-top: var(--sm);}	

	.xs-pd-sm > .cell-content,
	.xs-pd-b-sm > .cell-content,
	.xs-pd-tb-sm > .cell-content,
	.grid-item.xs-pd-b-sm,
	.xs-mr-sm,
	.xs-mr-b-sm,
	.xs-mr-tb-sm
	{padding-bottom: var(--sm);}	

	.xs-pd-sm > .cell-content,
	.xs-pd-l-sm > .cell-content,
	.xs-pd-lr-sm > .cell-content,
	.xs-mr-sm,
	.xs-mr-l-sm,
	.xs-mr-lr-sm
	{padding-left: var(--sm);}	

	.xs-pd-sm > .cell-content,
	.xs-pd-r-sm > .cell-content,
	.xs-pd-lr-sm > .cell-content,
	.xs-mr-sm,
	.xs-mr-r-sm,
	.xs-mr-lr-sm
	{padding-right: var(--sm);}	


	/* ================================================== */
	/* padding/margin MD
	/* ================================================== */

	.xs-pd-md > .cell-content,
	.xs-pd-t-md > .cell-content,
	.xs-pd-tb-md > .cell-content,
	.xs-mr-md,
	.xs-mr-t-md,
	.xs-mr-tb-md
	{padding-top: var(--md);}	

	.xs-pd-md > .cell-content,
	.xs-pd-b-md > .cell-content,
	.xs-pd-tb-md > .cell-content,
	.xs-mr-md,
	.xs-mr-b-md,
	.xs-mr-tb-md
	{padding-bottom: var(--md);}	

	.xs-pd-md > .cell-content,
	.xs-pd-l-md > .cell-content,
	.xs-pd-lr-md > .cell-content,
	.xs-mr-md,
	.xs-mr-l-md,
	.xs-mr-lr-md
	{padding-left: var(--md);}	

	.xs-pd-md > .cell-content,
	.xs-pd-r-md > .cell-content,
	.xs-pd-lr-md > .cell-content,
	.xs-mr-md,
	.xs-mr-r-md,
	.xs-mr-lr-md
	{padding-right: var(--md);}	


	/* ================================================== */
	/* padding/margin LG
	/* ================================================== */

	.xs-pd-lg > .cell-content,
	.xs-pd-t-lg > .cell-content,
	.xs-pd-tb-lg > .cell-content,
	.xs-mr-lg,
	.xs-mr-t-lg,
	.xs-mr-tb-lg
	{padding-top: var(--lg);}	

	.xs-pd-lg > .cell-content,
	.xs-pd-b-lg > .cell-content,
	.xs-pd-tb-lg > .cell-content,
	.xs-mr-lg,
	.xs-mr-b-lg,
	.xs-mr-tb-lg
	{padding-bottom: var(--lg);}	

	.xs-pd-lg > .cell-content,
	.xs-pd-l-lg > .cell-content,
	.xs-pd-lr-lg > .cell-content,
	.xs-mr-lg,
	.xs-mr-l-lg,
	.xs-mr-lr-lg
	{padding-left: var(--lg);}	

	.xs-pd-lg > .cell-content,
	.xs-pd-r-lg > .cell-content,
	.xs-pd-lr-lg > .cell-content,
	.xs-mr-lg,
	.xs-mr-r-lg,
	.xs-mr-lr-lg
	{padding-right: var(--lg);}	


	/* ================================================== */
	/* padding/margin XL
	/* ================================================== */

	.xs-pd-xl > .cell-content,
	.xs-pd-t-xl > .cell-content,
	.xs-pd-tb-xl > .cell-content,
	.xs-mr-xl,
	.xs-mr-t-xl,
	.xs-mr-tb-xl
	{padding-top: var(--xl);}	

	.xs-pd-xl > .cell-content,
	.xs-pd-b-xl > .cell-content,
	.xs-pd-tb-xl > .cell-content,
	.xs-mr-xl,
	.xs-mr-b-xl,
	.xs-mr-tb-xl
	{padding-bottom: var(--xl);}	

	.xs-pd-xl > .cell-content,
	.xs-pd-l-xl > .cell-content,
	.xs-pd-lr-xl > .cell-content,
	.xs-mr-xl,
	.xs-mr-l-xl,
	.xs-mr-lr-xl
	{padding-left: var(--xl);}	

	.xs-pd-xl > .cell-content,
	.xs-pd-r-xl > .cell-content,
	.xs-pd-lr-xl > .cell-content,
	.xs-mr-xl,
	.xs-mr-r-xl,
	.xs-mr-lr-xl
	{padding-right: var(--xl);}	


	/* ================================================== */
	/* padding/margin XXL
	/* ================================================== */

	.xs-pd-xxl > .cell-content,
	.xs-pd-t-xxl > .cell-content,
	.xs-pd-tb-xxl > .cell-content,
	.xs-mr-xxl,
	.xs-mr-t-xxl,
	.xs-mr-tb-xxl
	{padding-top: var(--xxl);}	

	.xs-pd-xxl > .cell-content,
	.xs-pd-b-xxl > .cell-content,
	.xs-pd-tb-xxl > .cell-content,
	.xs-mr-xxl,
	.xs-mr-b-xxl,
	.xs-mr-tb-xxl
	{padding-bottom: var(--xxl);}	

	.xs-pd-xxl > .cell-content,
	.xs-pd-l-xxl > .cell-content,
	.xs-pd-lr-xxl > .cell-content,
	.xs-mr-xxl,
	.xs-mr-l-xxl,
	.xs-mr-lr-xxl
	{padding-left: var(--xxl);}	

	.xs-pd-xxl > .cell-content,
	.xs-pd-r-xxl > .cell-content,
	.xs-pd-lr-xxl > .cell-content,
	.xs-mr-xxl,
	.xs-mr-r-xxl,
	.xs-mr-lr-xxl
	{padding-right: var(--xxl);}	


	/* ================================================== */
	/* cloumns with gap
	/* ================================================== */

	/* force column elements content to full width */
	.xs-col-2 > .cell-content > .cell,
	.xs-col-2 > .cell-content > a > .cell
	{width:100%;}

	.xs-col-2 > .cell-content > * {width:50%;}

	.xs-col-2.xs-gap-xs > .cell-content {gap:var(--gap-xs)}
	.xs-col-2.xs-gap-xs > .cell-content > * {width:calc(50% - calc( var(--gap-xs) * 1 / 2 ) );}

	.xs-col-2.xs-gap-sm > .cell-content {gap:var(--gap-sm)}
	.xs-col-2.xs-gap-sm > .cell-content > * {width:calc(50% - calc( var(--gap-sm) * 1 / 2 ) );}

	.xs-col-2.xs-gap-md > .cell-content {gap:var(--gap-md)}
	.xs-col-2.xs-gap-md > .cell-content > * {width:calc(50% - calc( var(--gap-md) * 1 / 2 ) );}

	.xs-col-2.xs-gap-lg > .cell-content {gap:var(--gap-lg)}
	.xs-col-2.xs-gap-lg > .cell-content > * {width:calc(50% - calc( var(--gap-lg) * 1 / 2 ) );}

	.xs-col-2.xs-gap-xl > .cell-content {gap:var(--gap-xl)}
	.xs-col-2.xs-gap-xl > .cell-content > * {width:calc(50% - calc( var(--gap-xl) * 1 / 2 ) );}

	.xs-col-2.xs-gap-xxl > .cell-content {gap:var(--gap-xxl)}
	.xs-col-2.xs-gap-xxl > .cell-content > * {width:calc(50% - calc( var(--gap-xxl) * 1 / 2 ) );}


	/* force column elements content to full width */
	.xs-col-3 > .cell-content > .cell,
	.xs-col-3 > .cell-content > a > .cell
	{width:100%;}

	.xs-col-3 > .cell-content > * {width:33.333333%;}

	.xs-col-3.xs-gap-xs > .cell-content {gap:var(--gap-xs)}
	.xs-col-3.xs-gap-xs > .cell-content > * {width:calc(33.333333% - calc( var(--gap-xs) * 2 / 3 ) );}

	.xs-col-3.xs-gap-sm > .cell-content {gap:var(--gap-sm)}
	.xs-col-3.xs-gap-sm > .cell-content > * {width:calc(33.333333% - calc( var(--gap-sm) * 2 / 3 ) );}

	.xs-col-3.xs-gap-md > .cell-content {gap:var(--gap-md)}
	.xs-col-3.xs-gap-md > .cell-content > * {width:calc(33.333333% - calc( var(--gap-md) * 2 / 3 ) );}

	.xs-col-3.xs-gap-lg > .cell-content {gap:var(--gap-lg)}
	.xs-col-3.xs-gap-lg > .cell-content > * {width:calc(33.333333% - calc( var(--gap-lg) * 2 / 3 ) );}

	.xs-col-3.xs-gap-xl > .cell-content {gap:var(--gap-xl)}
	.xs-col-3.xs-gap-xl > .cell-content > * {width:calc(33.333333% - calc( var(--gap-xl) * 2 / 3 ) );}

	.xs-col-3.xs-gap-xxl > .cell-content {gap:var(--gap-xxl)}
	.xs-col-3.xs-gap-xxl > .cell-content > * {width:calc(33.333333% - calc( var(--gap-xxl) * 2 / 3 ) );}


	/* force column elements content to full width */
	.xs-col-4 > .cell-content > .cell,
	.xs-col-4 > .cell-content > a > .cell
	{width:100%;}

	.xs-col-4 > .cell-content > * {width:25%;}

	.xs-col-4.xs-gap-xs > .cell-content {gap:var(--gap-xs)}
	.xs-col-4.xs-gap-xs > .cell-content > * {width:calc(25% - calc( var(--gap-xs) * 3 / 4 ) );}

	.xs-col-4.xs-gap-sm > .cell-content {gap:var(--gap-sm)}
	.xs-col-4.xs-gap-sm > .cell-content > * {width:calc(25% - calc( var(--gap-sm) * 3 / 4 ) );}

	.xs-col-4.xs-gap-md > .cell-content {gap:var(--gap-md)}
	.xs-col-4.xs-gap-md > .cell-content > * {width:calc(25% - calc( var(--gap-md) * 3 / 4 ) );}

	.xs-col-4.xs-gap-lg > .cell-content {gap:var(--gap-lg)}
	.xs-col-4.xs-gap-lg > .cell-content > * {width:calc(25% - calc( var(--gap-lg) * 3 / 4 ) );}

	.xs-col-4.xs-gap-xl > .cell-content {gap:var(--gap-xl)}
	.xs-col-4.xs-gap-xl > .cell-content > * {width:calc(25% - calc( var(--gap-xl) * 3 / 4 ) );}

	.xs-col-4.xs-gap-xxl > .cell-content {gap:var(--gap-xxl)}
	.xs-col-4.xs-gap-xxl > .cell-content > * {width:calc(25% - calc( var(--gap-xxl) * 3 / 4 ) );}


	/* force column elements content to full width */
	.xs-col-5 > .cell-content > .cell,
	.xs-col-5 > .cell-content > a > .cell
	{width:100%;}

	.xs-col-5 > .cell-content > * {width:20%;}

	.xs-col-5.xs-gap-xs > .cell-content {gap:var(--gap-xs)}
	.xs-col-5.xs-gap-xs > .cell-content > * {width:calc(20% - calc( var(--gap-xs) * 4 / 5 ) );}

	.xs-col-5.xs-gap-sm > .cell-content {gap:var(--gap-sm)}
	.xs-col-5.xs-gap-sm > .cell-content > * {width:calc(20% - calc( var(--gap-sm) * 4 / 5 ) );}

	.xs-col-5.xs-gap-md > .cell-content {gap:var(--gap-md)}
	.xs-col-5.xs-gap-md > .cell-content > * {width:calc(20% - calc( var(--gap-md) * 4 / 5 ) );}

	.xs-col-5.xs-gap-lg > .cell-content {gap:var(--gap-lg)}
	.xs-col-5.xs-gap-lg > .cell-content > * {width:calc(20% - calc( var(--gap-lg) * 4 / 5 ) );}

	.xs-col-5.xs-gap-xl > .cell-content {gap:var(--gap-xl)}
	.xs-col-5.xs-gap-xl > .cell-content > * {width:calc(20% - calc( var(--gap-xl) * 4 / 5 ) );}

	.xs-col-5.xs-gap-xxl > .cell-content {gap:var(--gap-xxl)}
	.xs-col-5.xs-gap-xxl > .cell-content > * {width:calc(20% - calc( var(--gap-xxl) * 4 / 5 ) );}


	/* force column elements content to full width */
	.xs-col-6 > .cell-content > .cell,
	.xs-col-6 > .cell-content > a > .cell
	{width:100%;}

	.xs-col-6 > .cell-content > * {width:16.666667%;}

	.xs-col-6.xs-gap-xs > .cell-content {gap:var(--gap-xs)}
	.xs-col-6.xs-gap-xs > .cell-content > * {width:calc(16.666667% - calc( var(--gap-xs) * 5 / 6 ) );}

	.xs-col-6.xs-gap-sm > .cell-content {gap:var(--gap-sm)}
	.xs-col-6.xs-gap-sm > .cell-content > * {width:calc(16.666667% - calc( var(--gap-sm) * 5 / 6 ) );}

	.xs-col-6.xs-gap-md > .cell-content {gap:var(--gap-md)}
	.xs-col-6.xs-gap-md > .cell-content > * {width:calc(16.666667% - calc( var(--gap-md) * 5 / 6 ) );}

	.xs-col-6.xs-gap-lg > .cell-content {gap:var(--gap-lg)}
	.xs-col-6.xs-gap-lg > .cell-content > * {width:calc(16.666667% - calc( var(--gap-lg) * 5 / 6 ) );}

	.xs-col-6.xs-gap-xl > .cell-content {gap:var(--gap-xl)}
	.xs-col-6.xs-gap-xl > .cell-content > * {width:calc(16.666667% - calc( var(--gap-xl) * 5 / 6 ) );}

	.xs-col-6.xs-gap-xxl > .cell-content {gap:var(--gap-xxl)}
	.xs-col-6.xs-gap-xxl > .cell-content > * {width:calc(16.666667% - calc( var(--gap-xxl) * 5 / 6 ) );}

}