/* ================================= Padding Css Start =========================== */
@each $property, $value in $spaces {
  .tw-p-#{$property} {
    padding: var(--size-#{$property});
  }
}

@each $property, $value in $spaces {
  .tw-px-#{$property} {
    padding-inline: var(--size-#{$property});
  }
}

@each $property, $value in $spaces {
  .tw-py-#{$property} {
    padding-block: var(--size-#{$property});
  }
}

@each $property, $value in $spaces {
  .tw-ps-#{$property} {
    padding-inline-start: var(--size-#{$property});
  }
}

@each $property, $value in $spaces {
  .tw-pe-#{$property} {
    padding-inline-end: var(--size-#{$property});
  }
}

@each $property, $value in $spaces {
  .tw-pt-#{$property} {
    padding-block-start: var(--size-#{$property});
  }
}

@each $property, $value in $spaces {
  .tw-pb-#{$property} {
    padding-block-end: var(--size-#{$property});
  }
}

.tw {
  &-p {
    &-36-px {
      padding: clamp(1rem, -6.1013rem + 9.4763vw, 2.25rem);
    }
    &-48-px {
      padding: clamp(1.5rem, -12.1677rem + 32.9177vw, 3rem);
    }
    &-60-px {
      padding: clamp(1.5rem, -12.1677rem + 32.9177vw, 3.75rem);
    }
  }
}

.py-120 {
  padding-block-start: 60px;
  padding-block-end: 60px;
  @media (min-width: 576px) {
    padding-block-start: 80px;
    padding-block-end: 80px;
  }
  @media (min-width: 992px) {
    padding-block-start: 120px;
    padding-block-end: 120px;
  }
}
.pt-120 {
    padding-block-start: 60px;
    @media (min-width: 576px) {
      padding-block-start: 80px;
    }
    @media (min-width: 992px) {
    padding-block-start: 120px;
  }
}
.pb-120 {
    padding-block-end: 60px;
    @media (min-width: 576px) {
      padding-block-end: 80px;
    }
    @media (min-width: 992px) {
      padding-block-end: 120px;
    }
}
.py-60 {
    padding-block-start: 30px;
    padding-block-end: 30px;
    @media (min-width: 576px) {
      padding-block-start: 40px;
      padding-block-end: 40px;
    }
    @media (min-width: 992px) {
      padding-block-start: 60px;
      padding-block-end: 60px;
    }
}
.pt-60 {
    padding-block-start: 30px;
    @media (min-width: 576px) {
      padding-block-start: 40px;
    }
    @media (min-width: 992px) {
      padding-block-start: 60px;
    }
}
  .pb-60 {
    padding-block-end: 30px;
    @media (min-width: 576px) {
      padding-block-end: 40px;
    }
    @media (min-width: 992px) {
      padding-block-end: 60px;
    }
}
/* ================================= Padding Css End =========================== */
