@use '../abstract/_all';
@use '../abstract/breakpoints';
@use '../abstract/mixins';
@use '../abstract/setup';

.rat-16-9 {
  @include mixins.ratio(16, 9);
}

.rat-21-9 {
  @include mixins.ratio(21, 9);
}

.rat-1-1 {
  @include mixins.ratio(1, 1);
}

.rat-2-1 {
  @include mixins.ratio(2, 1);
}

.rat-2-3 {
  @include mixins.ratio(800, 1066);
}

.rat-3-2 {
  @include mixins.ratio(3, 2);
}

.rat-3-4 {
  @include mixins.ratio(3, 4);
}

.rat-4-2 {
  @include mixins.ratio(4, 2);
}

.rat-4-3 {
  @include mixins.ratio(4, 3);
}

.rat-strech {
  @include mixins.ratio(275, 445);
}

.rat-main {
  @include mixins.ratio(800, 1066);
}

.rat-double {
  @include mixins.ratio(867, 559);
}

.sk-load {
  position: relative;

  &::before {
    display: block;
    content: '';
    width: 100%;
    padding-top: 126%;
    background-color: setup.$c-white;
  }

  &::marker {
    display: none;
    content: '';
  }
}

.sk-load1 {
  position: relative;

  &::before {
    display: block;
    content: '';
    width: 100%;
    padding-top: calc(133.25% + 126px);
    background-color: setup.$c-white;

    @media (min-width: 992px) {
      padding-top: calc(133.25% + 144px);
    }
  }

  &::marker {
    display: none;
    content: '';
  }
}

.sk-load2 {
  position: relative;

  &::before {
    display: block;
    content: '';
    width: 100%;
    padding-top: calc(133.25% + 126px);
    background-color: setup.$c-white;

    @media (min-width: 992px) {
      padding-top: calc(133.25% + 144px);
    }
  }

  &::marker {
    display: none;
    content: '';
  }
}

.sk-load3 {
  position: relative;

  &::before {
    display: block;
    content: '';
    width: 100%;
    padding-top: 133.25%;
    background-color: setup.$c-white;
  }

  &::marker {
    display: none;
    content: '';
  }
}

.sk-load4 {
  position: relative;

  &::before {
    display: block;
    content: '';
    width: 100%;
    padding-top: 75.5%;
  }

  .card9-link {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
  }

  &::marker {
    display: none;
    content: '';
  }
}

.sk-load5 {
  position: relative;

  &::before {
    display: block;
    content: '';
    width: 100%;
    padding-top: calc(66.6667% + 126px);
    background-color: setup.$c-white;

    @media (min-width: breakpoints.$break-sm) {
      padding-top: calc(66.6667% + 144px);
    }
  }

  &::marker {
    display: none;
    content: '';
  }
}

.sk-load6 {
  position: relative;

  &::before {
    display: block;
    content: '';
    width: 100%;
    padding-top: 133.25%;
    background-color: setup.$c-white;

    @media (min-width: 992px) {
      padding-top: 133.25%;
    }
  }
  &.hidden-image::before {
    padding-top: 126px;
  }

  &::marker {
    display: none;
    content: '';
  }
}

.sk-load7 {
  position: relative;

  &::before {
    display: block;
    content: '';
    width: 100%;
    padding-top: 66.6667%;
    background-color: setup.$c-white;
  }

  &::marker {
    display: none;
    content: '';
  }
}

.swiper-monoproducto .swiper-wrapper {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
}

.sk-load9 {
  position: relative;

  &:before {
    display: block;
    content: '';
    width: 100%;
    padding-top: calc(64.66667% + 126px);
    background-color: setup.$c-white;

    .p-view {
      background-color: transparent;
    }

    @media (min-width: #{breakpoints.$break-md}) {
      padding-top: calc(62.9% + 144px);
    }

    @media (min-width: #{breakpoints.$break-lg}) {
      padding-top: calc(64.7% + 144px);
    }
  }

  &::marker {
    display: none;
    content: '';
  }
}
.ar-1-1 {
  aspect-ratio: 1/1;
}

.ar-4-3 {
  aspect-ratio: 4/3;
}

.ar-3-4 {
  aspect-ratio: 3 / 4;
}
.ar-3-2 {
  aspect-ratio: 3 / 2;
}
.ar-16-9 {
  aspect-ratio: 16 / 9;
}
.ar-9-16 {
  aspect-ratio: 9 / 16;
}
.ar-1-1 {
  aspect-ratio: 1 / 1;
}
.ar-20-9 {
  aspect-ratio: 20 / 9;
}
.grid-wrap-custom {
  .sk-load:before,
  .sk-load1:before,
  .sk-load2:before,
  .sk-load3:before,
  .sk-load5:before,
  .sk-load6:before,
  .p-view {
    background-color: transparent;
  }
}