/* SPACING SCALE (seperti Bootstrap 4) */
:root {
  --spacer-0: 0;
  --spacer-1: 0.25rem; /* 4px */
  --spacer-2: 0.5rem;  /* 8px */
  --spacer-3: 1rem;    /* 16px */
  --spacer-4: 1.5rem;  /* 24px */
  --spacer-5: 3rem;    /* 48px */
}

/* Directions:
   t = top, b = bottom, l = left, r = right
   x = left & right, y = top & bottom
*/

/* Margin Utilities */
.m-0 { margin: var(--spacer-0) !important; }
.m-1 { margin: var(--spacer-1) !important; }
.m-2 { margin: var(--spacer-2) !important; }
.m-3 { margin: var(--spacer-3) !important; }
.m-4 { margin: var(--spacer-4) !important; }
.m-5 { margin: var(--spacer-5) !important; }

.mt-0 { margin-top: var(--spacer-0) !important; }
.mt-1 { margin-top: var(--spacer-1) !important; }
.mt-2 { margin-top: var(--spacer-2) !important; }
.mt-3 { margin-top: var(--spacer-3) !important; }
.mt-4 { margin-top: var(--spacer-4) !important; }
.mt-5 { margin-top: var(--spacer-5) !important; }

.mb-0 { margin-bottom: var(--spacer-0) !important; }
.mb-1 { margin-bottom: var(--spacer-1) !important; }
.mb-2 { margin-bottom: var(--spacer-2) !important; }
.mb-3 { margin-bottom: var(--spacer-3) !important; }
.mb-4 { margin-bottom: var(--spacer-4) !important; }
.mb-5 { margin-bottom: var(--spacer-5) !important; }

.ml-0 { margin-left: var(--spacer-0) !important; }
.ml-1 { margin-left: var(--spacer-1) !important; }
.ml-2 { margin-left: var(--spacer-2) !important; }
.ml-3 { margin-left: var(--spacer-3) !important; }
.ml-4 { margin-left: var(--spacer-4) !important; }
.ml-5 { margin-left: var(--spacer-5) !important; }

.mr-0 { margin-right: var(--spacer-0) !important; }
.mr-1 { margin-right: var(--spacer-1) !important; }
.mr-2 { margin-right: var(--spacer-2) !important; }
.mr-3 { margin-right: var(--spacer-3) !important; }
.mr-4 { margin-right: var(--spacer-4) !important; }
.mr-5 { margin-right: var(--spacer-5) !important; }

.mx-0 { margin-left: var(--spacer-0) !important; margin-right: var(--spacer-0) !important; }
.mx-1 { margin-left: var(--spacer-1) !important; margin-right: var(--spacer-1) !important; }
.mx-2 { margin-left: var(--spacer-2) !important; margin-right: var(--spacer-2) !important; }
.mx-3 { margin-left: var(--spacer-3) !important; margin-right: var(--spacer-3) !important; }
.mx-4 { margin-left: var(--spacer-4) !important; margin-right: var(--spacer-4) !important; }
.mx-5 { margin-left: var(--spacer-5) !important; margin-right: var(--spacer-5) !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

.my-0 { margin-top: var(--spacer-0) !important; margin-bottom: var(--spacer-0) !important; }
.my-1 { margin-top: var(--spacer-1) !important; margin-bottom: var(--spacer-1) !important; }
.my-2 { margin-top: var(--spacer-2) !important; margin-bottom: var(--spacer-2) !important; }
.my-3 { margin-top: var(--spacer-3) !important; margin-bottom: var(--spacer-3) !important; }
.my-4 { margin-top: var(--spacer-4) !important; margin-bottom: var(--spacer-4) !important; }
.my-5 { margin-top: var(--spacer-5) !important; margin-bottom: var(--spacer-5) !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }

/* Padding Utilities */
.p-0 { padding: var(--spacer-0) !important; }
.p-1 { padding: var(--spacer-1) !important; }
.p-2 { padding: var(--spacer-2) !important; }
.p-3 { padding: var(--spacer-3) !important; }
.p-4 { padding: var(--spacer-4) !important; }
.p-5 { padding: var(--spacer-5) !important; }

.pt-0 { padding-top: var(--spacer-0) !important; }
.pt-1 { padding-top: var(--spacer-1) !important; }
.pt-2 { padding-top: var(--spacer-2) !important; }
.pt-3 { padding-top: var(--spacer-3) !important; }
.pt-4 { padding-top: var(--spacer-4) !important; }
.pt-5 { padding-top: var(--spacer-5) !important; }

.pb-0 { padding-bottom: var(--spacer-0) !important; }
.pb-1 { padding-bottom: var(--spacer-1) !important; }
.pb-2 { padding-bottom: var(--spacer-2) !important; }
.pb-3 { padding-bottom: var(--spacer-3) !important; }
.pb-4 { padding-bottom: var(--spacer-4) !important; }
.pb-5 { padding-bottom: var(--spacer-5) !important; }

.pl-0 { padding-left: var(--spacer-0) !important; }
.pl-1 { padding-left: var(--spacer-1) !important; }
.pl-2 { padding-left: var(--spacer-2) !important; }
.pl-3 { padding-left: var(--spacer-3) !important; }
.pl-4 { padding-left: var(--spacer-4) !important; }
.pl-5 { padding-left: var(--spacer-5) !important; }

.pr-0 { padding-right: var(--spacer-0) !important; }
.pr-1 { padding-right: var(--spacer-1) !important; }
.pr-2 { padding-right: var(--spacer-2) !important; }
.pr-3 { padding-right: var(--spacer-3) !important; }
.pr-4 { padding-right: var(--spacer-4) !important; }
.pr-5 { padding-right: var(--spacer-5) !important; }

.px-0 { padding-left: var(--spacer-0) !important; padding-right: var(--spacer-0) !important; }
.px-1 { padding-left: var(--spacer-1) !important; padding-right: var(--spacer-1) !important; }
.px-2 { padding-left: var(--spacer-2) !important; padding-right: var(--spacer-2) !important; }
.px-3 { padding-left: var(--spacer-3) !important; padding-right: var(--spacer-3) !important; }
.px-4 { padding-left: var(--spacer-4) !important; padding-right: var(--spacer-4) !important; }
.px-5 { padding-left: var(--spacer-5) !important; padding-right: var(--spacer-5) !important; }

.py-0 { padding-top: var(--spacer-0) !important; padding-bottom: var(--spacer-0) !important; }
.py-1 { padding-top: var(--spacer-1) !important; padding-bottom: var(--spacer-1) !important; }
.py-2 { padding-top: var(--spacer-2) !important; padding-bottom: var(--spacer-2) !important; }
.py-3 { padding-top: var(--spacer-3) !important; padding-bottom: var(--spacer-3) !important; }
.py-4 { padding-top: var(--spacer-4) !important; padding-bottom: var(--spacer-4) !important; }
.py-5 { padding-top: var(--spacer-5) !important; padding-bottom: var(--spacer-5) !important; }

/* ===== Breakpoint XS: max-width: 767.98px ===== */
@media (max-width: 767.98px) {
  /* Margin */
  .m-xs-0 { margin: 0 !important; }
  .m-xs-1 { margin: 0.25rem !important; }
  .m-xs-2 { margin: 0.5rem !important; }
  .m-xs-3 { margin: 1rem !important; }
  .m-xs-4 { margin: 1.5rem !important; }
  .m-xs-5 { margin: 3rem !important; }

  .mt-xs-0 { margin-top: 0 !important; }
  .mt-xs-1 { margin-top: 0.25rem !important; }
  .mt-xs-2 { margin-top: 0.5rem !important; }
  .mt-xs-3 { margin-top: 1rem !important; }
  .mt-xs-4 { margin-top: 1.5rem !important; }
  .mt-xs-5 { margin-top: 3rem !important; }

  .mb-xs-0 { margin-bottom: 0 !important; }
  .mb-xs-1 { margin-bottom: 0.25rem !important; }
  .mb-xs-2 { margin-bottom: 0.5rem !important; }
  .mb-xs-3 { margin-bottom: 1rem !important; }
  .mb-xs-4 { margin-bottom: 1.5rem !important; }
  .mb-xs-5 { margin-bottom: 3rem !important; }

  .ml-xs-0 { margin-left: 0 !important; }
  .ml-xs-1 { margin-left: 0.25rem !important; }
  .ml-xs-2 { margin-left: 0.5rem !important; }
  .ml-xs-3 { margin-left: 1rem !important; }
  .ml-xs-4 { margin-left: 1.5rem !important; }
  .ml-xs-5 { margin-left: 3rem !important; }

  .mr-xs-0 { margin-right: 0 !important; }
  .mr-xs-1 { margin-right: 0.25rem !important; }
  .mr-xs-2 { margin-right: 0.5rem !important; }
  .mr-xs-3 { margin-right: 1rem !important; }
  .mr-xs-4 { margin-right: 1.5rem !important; }
  .mr-xs-5 { margin-right: 3rem !important; }

  .mx-xs-0 { margin-left: 0 !important; margin-right: 0 !important; }
  .mx-xs-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
  .mx-xs-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
  .mx-xs-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
  .mx-xs-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
  .mx-xs-5 { margin-left: 3rem !important; margin-right: 3rem !important; }

  .my-xs-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
  .my-xs-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
  .my-xs-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
  .my-xs-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
  .my-xs-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
  .my-xs-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }

  /* Padding */
  .p-xs-0 { padding: 0 !important; }
  .p-xs-1 { padding: 0.25rem !important; }
  .p-xs-2 { padding: 0.5rem !important; }
  .p-xs-3 { padding: 1rem !important; }
  .p-xs-4 { padding: 1.5rem !important; }
  .p-xs-5 { padding: 3rem !important; }

  .pt-xs-0 { padding-top: 0 !important; }
  .pt-xs-1 { padding-top: 0.25rem !important; }
  .pt-xs-2 { padding-top: 0.5rem !important; }
  .pt-xs-3 { padding-top: 1rem !important; }
  .pt-xs-4 { padding-top: 1.5rem !important; }
  .pt-xs-5 { padding-top: 3rem !important; }

  .pb-xs-0 { padding-bottom: 0 !important; }
  .pb-xs-1 { padding-bottom: 0.25rem !important; }
  .pb-xs-2 { padding-bottom: 0.5rem !important; }
  .pb-xs-3 { padding-bottom: 1rem !important; }
  .pb-xs-4 { padding-bottom: 1.5rem !important; }
  .pb-xs-5 { padding-bottom: 3rem !important; }

  .pl-xs-0 { padding-left: 0 !important; }
  .pl-xs-1 { padding-left: 0.25rem !important; }
  .pl-xs-2 { padding-left: 0.5rem !important; }
  .pl-xs-3 { padding-left: 1rem !important; }
  .pl-xs-4 { padding-left: 1.5rem !important; }
  .pl-xs-5 { padding-left: 3rem !important; }

  .pr-xs-0 { padding-right: 0 !important; }
  .pr-xs-1 { padding-right: 0.25rem !important; }
  .pr-xs-2 { padding-right: 0.5rem !important; }
  .pr-xs-3 { padding-right: 1rem !important; }
  .pr-xs-4 { padding-right: 1.5rem !important; }
  .pr-xs-5 { padding-right: 3rem !important; }

  .px-xs-0 { padding-left: 0 !important; padding-right: 0 !important; }
  .px-xs-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
  .px-xs-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
  .px-xs-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .px-xs-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
  .px-xs-5 { padding-left: 3rem !important; padding-right: 3rem !important; }

  .py-xs-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
  .py-xs-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
  .py-xs-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
  .py-xs-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .py-xs-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  .py-xs-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
}

/* ===== Breakpoint MD: min-width: 768px ===== */
@media (min-width: 768px) {
  /* Sama seperti bagian xs di atas, ganti xs dengan md */

  /* Margin */
  .m-md-0 { margin: 0 !important; }
  .m-md-1 { margin: 0.25rem !important; }
  .m-md-2 { margin: 0.5rem !important; }
  .m-md-3 { margin: 1rem !important; }
  .m-md-4 { margin: 1.5rem !important; }
  .m-md-5 { margin: 3rem !important; }

  .mt-md-0 { margin-top: 0 !important; }
  .mt-md-1 { margin-top: 0.25rem !important; }
  .mt-md-2 { margin-top: 0.5rem !important; }
  .mt-md-3 { margin-top: 1rem !important; }
  .mt-md-4 { margin-top: 1.5rem !important; }
  .mt-md-5 { margin-top: 3rem !important; }

  .mb-md-0 { margin-bottom: 0 !important; }
  .mb-md-1 { margin-bottom: 0.25rem !important; }
  .mb-md-2 { margin-bottom: 0.5rem !important; }
  .mb-md-3 { margin-bottom: 1rem !important; }
  .mb-md-4 { margin-bottom: 1.5rem !important; }
  .mb-md-5 { margin-bottom: 3rem !important; }

  .ml-md-0 { margin-left: 0 !important; }
  .ml-md-1 { margin-left: 0.25rem !important; }
  .ml-md-2 { margin-left: 0.5rem !important; }
  .ml-md-3 { margin-left: 1rem !important; }
  .ml-md-4 { margin-left: 1.5rem !important; }
  .ml-md-5 { margin-left: 3rem !important; }

  .mr-md-0 { margin-right: 0 !important; }
  .mr-md-1 { margin-right: 0.25rem !important; }
  .mr-md-2 { margin-right: 0.5rem !important; }
  .mr-md-3 { margin-right: 1rem !important; }
  .mr-md-4 { margin-right: 1.5rem !important; }
  .mr-md-5 { margin-right: 3rem !important; }

  .mx-md-0 { margin-left: 0 !important; margin-right: 0 !important; }
  .mx-md-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
  .mx-md-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
  .mx-md-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
  .mx-md-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
  .mx-md-5 { margin-left: 3rem !important; margin-right: 3rem !important; }

  .my-md-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
  .my-md-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
  .my-md-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
  .my-md-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
  .my-md-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
  .my-md-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }

  /* Padding */
  .p-md-0 { padding: 0 !important; }
  .p-md-1 { padding: 0.25rem !important; }
  .p-md-2 { padding: 0.5rem !important; }
  .p-md-3 { padding: 1rem !important; }
  .p-md-4 { padding: 1.5rem !important; }
  .p-md-5 { padding: 3rem !important; }

  .pt-md-0 { padding-top: 0 !important; }
  .pt-md-1 { padding-top: 0.25rem !important; }
  .pt-md-2 { padding-top: 0.5rem !important; }
  .pt-md-3 { padding-top: 1rem !important; }
  .pt-md-4 { padding-top: 1.5rem !important; }
  .pt-md-5 { padding-top: 3rem !important; }

  .pb-md-0 { padding-bottom: 0 !important; }
  .pb-md-1 { padding-bottom: 0.25rem !important; }
  .pb-md-2 { padding-bottom: 0.5rem !important; }
  .pb-md-3 { padding-bottom: 1rem !important; }
  .pb-md-4 { padding-bottom: 1.5rem !important; }
  .pb-md-5 { padding-bottom: 3rem !important; }

  .pl-md-0 { padding-left: 0 !important; }
  .pl-md-1 { padding-left: 0.25rem !important; }
  .pl-md-2 { padding-left: 0.5rem !important; }
  .pl-md-3 { padding-left: 1rem !important; }
  .pl-md-4 { padding-left: 1.5rem !important; }
  .pl-md-5 { padding-left: 3rem !important; }

  .pr-md-0 { padding-right: 0 !important; }
  .pr-md-1 { padding-right: 0.25rem !important; }
  .pr-md-2 { padding-right: 0.5rem !important; }
  .pr-md-3 { padding-right: 1rem !important; }
  .pr-md-4 { padding-right: 1.5rem !important; }
  .pr-md-5 { padding-right: 3rem !important; }

  .px-md-0 { padding-left: 0 !important; padding-right: 0 !important; }
  .px-md-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
  .px-md-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
  .px-md-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .px-md-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
  .px-md-5 { padding-left: 3rem !important; padding-right: 3rem !important; }

  .py-md-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
  .py-md-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
  .py-md-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
  .py-md-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .py-md-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  .py-md-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
}

.aspect-ratio-16-9{
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
.aspect-ratio-10-4{
  position: relative;
  width: 100%;
  padding-top: 40%; /* 10:4 Aspect Ratio */
}
.aspect-ratio-3-2{
  position: relative;
  width: 100%;
  padding-top: 66.67%; /* 3:2 Aspect Ratio */
  overflow: hidden;
}

.aspect-ratio-10-3{
  position: relative;
  width: 100%;
  padding-top: 30%; /* 10:3 Aspect Ratio */
}

.aspect-ratio-10-8{
  position: relative;
  width: 100%;
  padding-top: 80%; /* 10:8 Aspect Ratio */
}

.aspect-ratio-10-13{
  position: relative;
  width: 100%;
  padding-top: 130%; /* 10:13 Aspect Ratio */
}

.aspect-ratio-10-14p5{
  position: relative;
  width: 100%;
  padding-top: 145%; /* 10:14.5 Aspect Ratio */
}

.aspect-ratio-9-16{
  position: relative;
  width: 100%;
  padding-top: 177.78%; /* 9:16 Aspect Ratio */
}

.aspect-ratio-1-1{
  position: relative;
  width: 100%;
  padding-top: 100%; /* 1:1 Aspect Ratio */
}

.image-ratio{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}