/*
 * Spacing utilities: margin (m) and padding (p).
 * Scale: 1 = smallest, 4 = largest.
 * Suffixes: t = top, b = bottom, l = left, r = right, x = left+right, y = top+bottom.
 * No suffix = all sides.
 */



.clothing{
  border:1px solid #2c344e;
  border-radius:15px;
  width:250px;
  height:350px;
  text-decoration: none;
}

.clothing-name{
  text-decoration: none;
}

.tagbox{
  display:flex;
  width:200px;
}

.flexed{
  display:flex;
}

.b1{
  border:1px solid #2c344e;
}

.cornered{border-radius:10px;}
:root {
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem;  /* 8px */
  --space-3: 1rem;    /* 16px */
  --space-4: 2rem;    /* 32px */
}

/* Margin - all sides */
.m1 { margin: var(--space-1) !important; }
.m2 { margin: var(--space-2) !important; }
.m3 { margin: var(--space-3) !important; }
.m4 { margin: var(--space-4) !important; }

/* Margin - top */
.mt1 { margin-top: var(--space-1) !important; }
.mt2 { margin-top: var(--space-2) !important; }
.mt3 { margin-top: var(--space-3) !important; }
.mt4 { margin-top: var(--space-4) !important; }

/* Margin - bottom */
.mb1 { margin-bottom: var(--space-1) !important; }
.mb2 { margin-bottom: var(--space-2) !important; }
.mb3 { margin-bottom: var(--space-3) !important; }
.mb4 { margin-bottom: var(--space-4) !important; }

/* Margin - left */
.ml1 { margin-left: var(--space-1) !important; }
.ml2 { margin-left: var(--space-2) !important; }
.ml3 { margin-left: var(--space-3) !important; }
.ml4 { margin-left: var(--space-4) !important; }

/* Margin - right */
.mr1 { margin-right: var(--space-1) !important; }
.mr2 { margin-right: var(--space-2) !important; }
.mr3 { margin-right: var(--space-3) !important; }
.mr4 { margin-right: var(--space-4) !important; }

/* Margin - left + right */
.mx1 { margin-left: var(--space-1) !important; margin-right: var(--space-1) !important; }
.mx2 { margin-left: var(--space-2) !important; margin-right: var(--space-2) !important; }
.mx3 { margin-left: var(--space-3) !important; margin-right: var(--space-3) !important; }
.mx4 { margin-left: var(--space-4) !important; margin-right: var(--space-4) !important; }

/* Margin - top + bottom */
.my1 { margin-top: var(--space-1) !important; margin-bottom: var(--space-1) !important; }
.my2 { margin-top: var(--space-2) !important; margin-bottom: var(--space-2) !important; }
.my3 { margin-top: var(--space-3) !important; margin-bottom: var(--space-3) !important; }
.my4 { margin-top: var(--space-4) !important; margin-bottom: var(--space-4) !important; }

/* Padding - all sides */
.p1 { padding: var(--space-1) !important; }
.p2 { padding: var(--space-2) !important; }
.p3 { padding: var(--space-3) !important; }
.p4 { padding: var(--space-4) !important; }

/* Padding - top */
.pt1 { padding-top: var(--space-1) !important; }
.pt2 { padding-top: var(--space-2) !important; }
.pt3 { padding-top: var(--space-3) !important; }
.pt4 { padding-top: var(--space-4) !important; }

/* Padding - bottom */
.pb1 { padding-bottom: var(--space-1) !important; }
.pb2 { padding-bottom: var(--space-2) !important; }
.pb3 { padding-bottom: var(--space-3) !important; }
.pb4 { padding-bottom: var(--space-4) !important; }

/* Padding - left */
.pl1 { padding-left: var(--space-1) !important; }
.pl2 { padding-left: var(--space-2) !important; }
.pl3 { padding-left: var(--space-3) !important; }
.pl4 { padding-left: var(--space-4) !important; }

/* Padding - right */
.pr1 { padding-right: var(--space-1) !important; }
.pr2 { padding-right: var(--space-2) !important; }
.pr3 { padding-right: var(--space-3) !important; }
.pr4 { padding-right: var(--space-4) !important; }

/* Padding - left + right */
.px1 { padding-left: var(--space-1) !important; padding-right: var(--space-1) !important; }
.px2 { padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; }
.px3 { padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; }
.px4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }

/* Padding - top + bottom */
.py1 { padding-top: var(--space-1) !important; padding-bottom: var(--space-1) !important; }
.py2 { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
.py3 { padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; }
.py4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }