@import '../abstract/_all';
.rat-16-9 {
  @include ratio(16, 9);
}
.rat-21-9 {
  @include ratio(21, 9);
}
.rat-1-1 {
  @include ratio(1, 1);
}
.rat-2-1 {
  @include ratio(2, 1);
}
.rat-2-3 {
  @include ratio(800, 1066);
}
.rat-3-2 {
  @include ratio(3, 2);
}
.rat-3-4 {
  @include ratio(3, 4);
}
.rat-4-2 {
  @include ratio(4, 2);
}
.rat-4-3 {
  @include ratio(4, 3);
}
.rat-9-20 {
  @include ratio(9, 20);
}
.rat-strech {
  @include ratio(275, 445);
}
.rat-main {
  @include ratio(800, 1066);
}
.rat-double {
  @include ratio(867, 559);
}
.sk-load {
  position: relative;
  &::before {
    display: block;
    content: '';
    width: 100%;
    padding-top: 126%;
  }
  &::marker {
    display: none;
    content: '';
  }
}
.sk-load1 {
  position: relative;
  &::before {
    display: block;
    content: '';
    width: 100%;
    padding-top: calc(133.25% + 74px);
    @media (min-width: 992px) {
      padding-top: calc(133.25% + 74px);
    }
  }
  &::marker {
    display: none;
    content: '';
  }
}
.sk-load2 {
  position: relative;
  &::before {
    display: block;
    content: '';
    width: 100%;
    padding-top: calc(133.25% + 74px);
    @media (min-width: 992px) {
      padding-top: calc(133.25% + 74px);
    }
  }
  &::marker {
    display: none;
    content: '';
  }
}
.sk-load3 {
  position: relative;
  &::before {
    display: block;
    content: '';
    width: 100%;
    padding-top: 133.25%;
  }
  &::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% + 74px);
    @media (min-width: $break-sm) {
      padding-top: calc(66.6667% + 74px);
    }
  }
  &::marker {
    display: none;
    content: '';
  }
}
.sk-load6 {
  position: relative;
  &::before {
    display: block;
    content: '';
    width: 100%;
    padding-top: 133.25%;
    @media (min-width: 992px) {
      padding-top: 133.25%;
    }
  }
  &.hidden-image::before {
    padding-top: 74px;
  }
  &::marker {
    display: none;
    content: '';
  }
}
.sk-load7 {
  position: relative;
  &::before {
    display: block;
    content: '';
    width: 100%;
    padding-top: 66.6667%;
  }
  &::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.6667% + 74px);
    .p-view {
      background-color: transparent;
    }
    @media (min-width: #{$break-md}) {
      padding-top: calc(62.9% + 74px);
    }
    @media (min-width: #{$break-lg}) {
      padding-top: calc(64.7% + 74px);
    }
  }
  &::marker {
    display: none;
    content: '';
  }
}
.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;
}
.ar-9-20 {
  aspect-ratio: 9 / 20;
}

.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;
  }
}
.sk-load-34 {
  position: relative;
  &::before {
    display: block;
    content: '';
    width: 100%;
    padding-top: 139%;
  }
  &::marker {
    display: none;
    content: '';
  }
}
$bg-skload: $c-middle-grey;
.sk-load_3-4 {
  position: relative;
  &::before {
    display: block;
    content: '';
    width: 100%;
    aspect-ratio: 3 / 4;
    background-color: $bg-skload;
  }
  &::marker {
    display: none;
    content: '';
  }
}
.sk-load_2-3 {
  position: relative;
  &::before {
    display: block;
    content: '';
    width: 100%;
    aspect-ratio: 2 / 3;
    background-color: $bg-skload;
  }
  &::marker {
    display: none;
    content: '';
  }
}
.sk-load_1-1 {
  position: relative;
  &::before {
    display: block;
    content: '';
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: $bg-skload;
  }
  &::marker {
    display: none;
    content: '';
  }
}
.sk-load_2-1 {
  position: relative;
  &::before {
    display: block;
    content: '';
    width: 100%;
    aspect-ratio: 2 / 1;
    background-color: $bg-skload;
  }
  &::marker {
    display: none;
    content: '';
  }
}
.sk-load_4-3 {
  position: relative;
  &::before {
    display: block;
    content: '';
    width: 100%;
    aspect-ratio: 4 / 3;
    background-color: $bg-skload;
  }
  &::marker {
    display: none;
    content: '';
  }
}
.sk-load_3-2 {
  position: relative;
  &::before {
    display: block;
    content: '';
    width: 100%;
    aspect-ratio: 3 / 2;
    background-color: $bg-skload;
  }
  &::marker {
    display: none;
    content: '';
  }
}
.sk-load_16-9 {
  position: relative;
  &::before {
    display: block;
    content: '';
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: $bg-skload;
  }
  &::marker {
    display: none;
    content: '';
  }
}