/*
==============================
Variables
==============================
*/

:root {
  --xxl: 7rem;
  --xl: 5rem;
  --xlg : 4.5rem;
  --lg: 2.5rem;
  --md: 2rem;
  --sm: 1.5rem;
  --xs: 1rem;
  --xxs: 0.5rem;
}

/*
==============================
Custom Padding
==============================
*/

.p--md {
  padding-top: var(--md);
  padding-bottom: var(--md);
}
.pb--md {
  padding-bottom: var(--md);
}
.py--md {
  padding-top: var(--md);
  padding-bottom: var(--md);
}
.p--xl {
  padding-top: var(--xl);
  padding-bottom: var(--xl);
}
.py--xl {
  padding-top: var(--xl);
  padding-bottom: var(--xl);
}
.pt--xxl {
  padding-top: var(--xxl);
}

/*
==============================
Custom Margin
==============================
*/

.my--xl {
  margin-top: var(--xl);
  margin-bottom: var(--xl);
}
.my--md {
  margin-top: var(--md);
  margin-bottom: var(--md);
}

/*
==============================
Custom Gap
==============================
*/

@media (min-width: 992px) {
  .row-gap-md .row>* {
    padding-right: calc(var(--md)/ 2);
    padding-left: calc(var(--md)/ 2);
  }
}