.hidden {
  display: none;
}

@media (min-width: 768px) {
  .hidden-desktop {
    display: none;
  }
}

.p-1 {
  padding: var(--sp);
}

.p-2 {
  padding: calc(var(--sp) * 2);
}

.px-1 {
  padding-left: var(--sp);
  padding-right: var(--sp);
}
  
.px-2 {
  padding-left: calc(var(--sp) * 2);
  padding-right: calc(var(--sp) * 2);
}

.py-1 {
  padding-top: var(--sp);
  padding-bottom: var(--sp);
}
    
.py-2 {
  padding-top: calc(var(--sp) * 2);
  padding-bottom: calc(var(--sp) * 2);
}