/*------------------------------------*\
    PADDINGS, MARGINS
\*------------------------------------*/

/*------------------------------------*\
    PADDINGS
\*------------------------------------*/
:root {
  --xl: 4.0em;
  --lg: 3.0em;
  --md: 2.0em;  
  --sm: 1.0em;
  --gap: 16px;

  --color-primary: #151524;
  --color-red: #DA080E;
  --color-orange: #F69143;
  --color-lt-gray: #6e6e6e;
  --color-lt: #F5F6FA;
  --color-gray: #DEDEDE;
	
}


.p-xl
{
	padding: var(--xl);
}
.p-t-xl
{
	padding-top: var(--xl);
}
.p-b-xl
{
	padding-bottom: var(--xl);
}
.p-lg
{
	padding: var(--lg);
}
.p-t-lg
{
	padding-top: var(--lg);
}
.p-b-lg
{
	padding-bottom: var(--lg);
}
.p-md
{
	padding: var(--md);
}
.p-t-md
{
	padding-top: var(--md);
}
.p-b-md
{
	padding-bottom: var(--md);
}
.p-t-sm
{
	padding-top: var(--sm);
}
.p-b-sm
{
	padding-bottom: var(--sm);
}

/*------------------------------------*\
    MARGINS
\*------------------------------------*/
.m-t-xl
{
	margin-top: var(--xl);
}
.m-b-xl
{
	margin-bottom: var(--xl);
}
.m-t-lg
{
	margin-top: var(--lg);
}
.m-b-lg
{
	margin-bottom: var(--lg);
}
.m-t-md
{
	margin-top: var(--md);
}
.m-b-md
{
	margin-bottom: var(--md);
}
.m-b-sm
{
	margin-bottom: var(-sm);
}