.ra {
  position: relative;
}

.ra::before {
  display: block;
  content: "";
}

.ra-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.ra-1x1::before {
  padding-top: 100%;
}

.ra-1x2::before {
  padding-top: 200%;
}

.ra-1x3::before {
  padding-top: 300%;
}

.ra-2x1::before {
  padding-top: 50%;
}

.ra-2x3::before {
  padding-top: 150%;
}

.ra-3x1::before {
  padding-top: 33.3333333333%;
}

.ra-3x2::before {
  padding-top: 66.6666666667%;
}

.ra-3x4::before {
  padding-top: 133.3333333333%;
}

.ra-4x3::before {
  padding-top: 75%;
}

.ra-16x9::before {
  padding-top: 56.25%;
}

.ra-16x10::before {
  padding-top: 62.5%;
}

.ra-21x9::before {
  padding-top: 42.8571428571%;
}

@media (min-width: 576px) {
  .ra-sm-1x1::before {
    padding-top: 100%;
  }

  .ra-sm-1x2::before {
    padding-top: 200%;
  }

  .ra-sm-1x3::before {
    padding-top: 300%;
  }

  .ra-sm-2x1::before {
    padding-top: 50%;
  }

  .ra-sm-2x3::before {
    padding-top: 150%;
  }

  .ra-sm-3x1::before {
    padding-top: 33.3333333333%;
  }

  .ra-sm-3x2::before {
    padding-top: 66.6666666667%;
  }

  .ra-sm-3x4::before {
    padding-top: 133.3333333333%;
  }

  .ra-sm-4x3::before {
    padding-top: 75%;
  }

  .ra-sm-16x9::before {
    padding-top: 56.25%;
  }

  .ra-sm-16x10::before {
    padding-top: 62.5%;
  }

  .ra-sm-21x9::before {
    padding-top: 42.8571428571%;
  }
}
@media (min-width: 768px) {
  .ra-md-1x1::before {
    padding-top: 100%;
  }

  .ra-md-1x2::before {
    padding-top: 200%;
  }

  .ra-md-1x3::before {
    padding-top: 300%;
  }

  .ra-md-2x1::before {
    padding-top: 50%;
  }

  .ra-md-2x3::before {
    padding-top: 150%;
  }

  .ra-md-3x1::before {
    padding-top: 33.3333333333%;
  }

  .ra-md-3x2::before {
    padding-top: 66.6666666667%;
  }

  .ra-md-3x4::before {
    padding-top: 133.3333333333%;
  }

  .ra-md-4x3::before {
    padding-top: 75%;
  }

  .ra-md-16x9::before {
    padding-top: 56.25%;
  }

  .ra-md-16x10::before {
    padding-top: 62.5%;
  }

  .ra-md-21x9::before {
    padding-top: 42.8571428571%;
  }
}
@media (min-width: 992px) {
  .ra-lg-1x1::before {
    padding-top: 100%;
  }

  .ra-lg-1x2::before {
    padding-top: 200%;
  }

  .ra-lg-1x3::before {
    padding-top: 300%;
  }

  .ra-lg-2x1::before {
    padding-top: 50%;
  }

  .ra-lg-2x3::before {
    padding-top: 150%;
  }

  .ra-lg-3x1::before {
    padding-top: 33.3333333333%;
  }

  .ra-lg-3x2::before {
    padding-top: 66.6666666667%;
  }

  .ra-lg-3x4::before {
    padding-top: 133.3333333333%;
  }

  .ra-lg-4x3::before {
    padding-top: 75%;
  }

  .ra-lg-16x9::before {
    padding-top: 56.25%;
  }

  .ra-lg-16x10::before {
    padding-top: 62.5%;
  }

  .ra-lg-21x9::before {
    padding-top: 42.8571428571%;
  }
}
@media (min-width: 1200px) {
  .ra-xl-1x1::before {
    padding-top: 100%;
  }

  .ra-xl-1x2::before {
    padding-top: 200%;
  }

  .ra-xl-1x3::before {
    padding-top: 300%;
  }

  .ra-xl-2x1::before {
    padding-top: 50%;
  }

  .ra-xl-2x3::before {
    padding-top: 150%;
  }

  .ra-xl-3x1::before {
    padding-top: 33.3333333333%;
  }

  .ra-xl-3x2::before {
    padding-top: 66.6666666667%;
  }

  .ra-xl-3x4::before {
    padding-top: 133.3333333333%;
  }

  .ra-xl-4x3::before {
    padding-top: 75%;
  }

  .ra-xl-16x9::before {
    padding-top: 56.25%;
  }

  .ra-xl-16x10::before {
    padding-top: 62.5%;
  }

  .ra-xl-21x9::before {
    padding-top: 42.8571428571%;
  }
}
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}