@import '../abstract/_breakpoints';
@import '../abstract/_all';

$break-sm: 576px !default;
$break-md: 768px !default;
$break-lg: 992px !default;
$break-xl: 1200px !default;

.margin-auto {
  margin: 0 auto;
}

@for $i from 1 through length($espaciados) {
  $espaciado: nth($espaciados, $i);
  .m-#{$espaciado} {
    margin: #{$espaciado}px;
  }

  .mx-#{$espaciado} {
    margin-inline: #{$espaciado}px;
  }

  .my-#{$espaciado} {
    margin-top: #{$espaciado}px;
    margin-bottom: #{$espaciado}px;
  }
  .mt-#{$espaciado} {
    margin-top: #{$espaciado}px;
  }
  .mr-#{$espaciado} {
    margin-right: #{$espaciado}px;
  }
  .mb-#{$espaciado} {
    margin-bottom: #{$espaciado}px;
  }
  .ml-#{$espaciado} {
    margin-left: #{$espaciado}px;
  }
  .p-#{$espaciado} {
    padding: #{$espaciado}px;
  }

  .px-#{$espaciado} {
    padding-inline: #{$espaciado}px;
  }

  .py-#{$espaciado} {
    padding-top: #{$espaciado}px;
    padding-bottom: #{$espaciado}px;
  }

  .pt-#{$espaciado} {
    padding-top: #{$espaciado}px;
  }
  .pr-#{$espaciado} {
    padding-right: #{$espaciado}px;
  }
  .pb-#{$espaciado} {
    padding-bottom: #{$espaciado}px;
  }
  .pl-#{$espaciado} {
    padding-left: #{$espaciado}px;
  }
}

.sm\:mb-0 {
  @media (min-width: $break-sm) {
    margin-bottom: 0;
  }
}

.md\:mb-0 {
  @media (min-width: $break-md) {
    margin-bottom: 0;
  }
}

.lg\:mb-0 {
  @media (min-width: $break-lg) {
    margin-bottom: 0;
  }
}

.xl\:mb-0 {
  @media (min-width: $break-xl) {
    margin-bottom: 0;
  }
}

.sm\:mt-0 {
  @media (min-width: $break-sm) {
    margin-top: 0;
  }
}

.md\:mt-0 {
  @media (min-width: $break-md) {
    margin-top: 0;
  }
}

.lg\:mt-0 {
  @media (min-width: $break-lg) {
    margin-top: 0;
  }
}

.xl\:mt-0 {
  @media (min-width: $break-xl) {
    margin-top: 0;
  }
}

.sm\:pr-0 {
  @media (min-width: $break-sm) {
    padding-right: 0;
  }
}

.md\:pr-0 {
  @media (min-width: $break-md) {
    padding-right: 0;
  }
}

.lg\:pr-0 {
  @media (min-width: $break-lg) {
    padding-right: 0;
  }
}

.xl\:pr-0 {
  @media (min-width: $break-xl) {
    padding-right: 0;
  }
}

.sm\:pl-0 {
  @media (min-width: $break-sm) {
    padding-left: 0;
  }
}

.md\:pl-0 {
  @media (min-width: $break-md) {
    padding-left: 0;
  }
}

.lg\:pl-0 {
  @media (min-width: $break-lg) {
    padding-left: 0;
  }
}

.xl\:pl-0 {
  @media (min-width: $break-xl) {
    padding-left: 0;
  }
}

.sm\:pt-0 {
  @media (min-width: $break-sm) {
    padding-top: 0;
  }
}

.md\:pt-0 {
  @media (min-width: $break-md) {
    padding-top: 0;
  }
}

.lg\:pt-0 {
  @media (min-width: $break-lg) {
    padding-top: 0;
  }
}

.xl\:pt-0 {
  @media (min-width: $break-xl) {
    padding-top: 0;
  }
}

.sm\:pb-0 {
  @media (min-width: $break-sm) {
    padding-bottom: 0;
  }
}

.md\:pb-0 {
  @media (min-width: $break-md) {
    padding-bottom: 0;
  }
}

.lg\:pb-0 {
  @media (min-width: $break-lg) {
    padding-bottom: 0;
  }
}

.xl\:pb-0 {
  @media (min-width: $break-xl) {
    padding-bottom: 0;
  }
}

//////   @media (max-width: #{$break-sm - 1}) {

.smmax\:pb-0 {
  @media (max-width: #{$break-sm - 1}) {
    padding-bottom: 0;
  }
}

.mdmax\:pb-0 {
  @media (max-width: #{$break-md - 1}) {
    padding-bottom: 0;
  }
}

.lgmax\:pb-0 {
  @media (max-width: #{$break-lg - 1}) {
    padding-bottom: 0;
  }
}

.xlmax\:pb-0 {
  @media (max-width: #{$break-xl - 1}) {
    padding-bottom: 0;
  }
}

.smmax\:mb-0 {
  @media (max-width: #{$break-sm - 1}) {
    margin-bottom: 0;
  }
}

.mdmax\:mb-0 {
  @media (max-width: #{$break-md - 1}) {
    margin-bottom: 0;
  }
}

.lgmax\:mb-0 {
  @media (max-width: #{$break-lg - 1}) {
    margin-bottom: 0;
  }
}

.xlmax\:mb-0 {
  @media (max-width: #{$break-xl - 1}) {
    margin-bottom: 0;
  }
}

.smmax\:pt-0 {
  @media (max-width: #{$break-sm - 1}) {
    padding-top: 0;
  }
}

.mdmax\:pt-0 {
  @media (max-width: #{$break-md - 1}) {
    padding-top: 0;
  }
}

.lgmax\:pt-0 {
  @media (max-width: #{$break-lg - 1}) {
    padding-top: 0;
  }
}

.xlmax\:pt-0 {
  @media (max-width: #{$break-xl - 1}) {
    padding-top: 0;
  }
}

.smmax\:mt-0 {
  @media (max-width: #{$break-sm - 1}) {
    margin-top: 0;
  }
}

.mdmax\:mt-0 {
  @media (max-width: #{$break-md - 1}) {
    margin-top: 0;
  }
}

.lgmax\:mt-0 {
  @media (max-width: #{$break-lg - 1}) {
    margin-top: 0;
  }
}

.xlmax\:mt-0 {
  @media (max-width: #{$break-xl - 1}) {
    margin-top: 0;
  }
}

.smmax\:mb-16 {
  @media (max-width: #{$break-sm - 1}) {
    margin-bottom: 16px;
  }
}
.mdmax\:mb-16 {
  @media (max-width: #{$break-md - 1}) {
    margin-bottom: 16px;
  }
}
.mdmax\:mb-20 {
  @media (max-width: #{$break-md - 1}) {
    margin-bottom: 24px;
  }
}
.mdmax\:mb-24 {
  @media (max-width: #{$break-md - 1}) {
    margin-bottom: 24px;
  }
}
.mdmax\:mb-32 {
  @media (max-width: #{$break-md - 1}) {
    margin-bottom: 32px;
  }
}
.mdmax\:mb-40 {
  @media (max-width: #{$break-md - 1}) {
    margin-bottom: 40px;
  }
}
.mdmax\:mb-42 {
  @media (max-width: #{$break-md - 1}) {
    margin-bottom: 42px;
  }
}