/* ==================================
   KK SPACE v1
   Spacing scale (base 16px)
================================== */

:root {
  --kk-space-8: 0.5rem;    /* 8px */
  --kk-space-16: 1rem;     /* 16px */
  --kk-space-24: 1.5rem;   /* 24px */
  --kk-space-32: 2rem;     /* 32px */
  --kk-space-40: 2.5rem;   /* 40px */
  --kk-space-60: 3.75rem;  /* 60px */
  --kk-space-80: 5rem;     /* 80px */

}

/* Vertical padding */
.kk-pad-v-s  { padding-block: var(--kk-space-16); }
.kk-pad-v-m  { padding-block: var(--kk-space-24); }
.kk-pad-v-l  { padding-block: var(--kk-space-40); }
.kk-pad-v-xl { padding-block: var(--kk-space-80); }

/* Margin bottom */
.kk-mar-b-s  { margin-bottom: var(--kk-space-16); }
.kk-mar-b-m  { margin-bottom: var(--kk-space-24); }
.kk-mar-b-l  { margin-bottom: var(--kk-space-40); }
.kk-mar-b-xl { margin-bottom: var(--kk-space-60); }

/* ==================================
   KK INNER v1
================================== */

.kk-inner {
  width: 100%;
  margin-inline: auto;
	}

@media (max-width: 576px) {
	.kk-inner {
		padding-inline: 1.3rem;
	}
}


@media (min-width: 576px) {
	.kk-inner {
	max-width: 540px;
/* 	padding-inline: 1.2rem; */
	}
}
@media (min-width: 576px) {
	.kk-inner {
	max-width: 540px;
/* 	padding-inline: 1.2rem; */
	}
}

@media (min-width: 768px) {
  .kk-inner {
    max-width: 720px;
  }
}

@media (min-width: 1000px) {
  .kk-inner {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .kk-inner {
    max-width: 1140px;
  }
}

@media (min-width: 1400px) {
  .kk-inner {
    max-width: 1320px;
  }
}

@media (min-width: 1600px) {
  .kk-inner {
    max-width: 100%;
    padding-inline: 2rem;

  }
}