.rect-box {
  position: relative;
  width: 100%;
}
.rect-box::before {
  content: "";
  display: block;
  padding-top: 75%;
}
.rect-box.square::before {
  padding-top: 100%;
}
.rect-box.low::before {
  padding-top: 50%;
}
.rect-box .img-fluid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  font-family: "object-fit: contain";
}
.rect-box.cover .img-fluid {
  object-fit: cover;
  font-family: "object-fit: cover";
}

.m-def {
  margin: 15px !important;
}

.mt-def {
  margin-top: 15px !important;
}

.mb-def {
  margin-bottom: 15px !important;
}

.ml-def {
  margin-left: 15px !important;
}

.mr-def {
  margin-right: 15px !important;
}

.mx-def {
  margin-left: 15px !important;
  margin-right: 15px !important;
}

.my-def {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
}

@media (min-width: 576px) {
  .m-sm-def {
    margin: 15px !important;
  }
  .mt-sm-def {
    margin-top: 15px !important;
  }
  .mb-sm-def {
    margin-bottom: 15px !important;
  }
  .ml-sm-def {
    margin-left: 15px !important;
  }
  .mr-sm-def {
    margin-right: 15px !important;
  }
  .mx-sm-def {
    margin-left: 15px !important;
    margin-right: 15px !important;
  }
  .my-sm-def {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }
}

@media (min-width: 768px) {
  .m-md-def {
    margin: 15px !important;
  }
  .mt-md-def {
    margin-top: 15px !important;
  }
  .mb-md-def {
    margin-bottom: 15px !important;
  }
  .ml-md-def {
    margin-left: 15px !important;
  }
  .mr-md-def {
    margin-right: 15px !important;
  }
  .mx-md-def {
    margin-left: 15px !important;
    margin-right: 15px !important;
  }
  .my-md-def {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }
}

@media (min-width: 992px) {
  .m-lg-def {
    margin: 15px !important;
  }
  .mt-lg-def {
    margin-top: 15px !important;
  }
  .mb-lg-def {
    margin-bottom: 15px !important;
  }
  .ml-lg-def {
    margin-left: 15px !important;
  }
  .mr-lg-def {
    margin-right: 15px !important;
  }
  .mx-lg-def {
    margin-left: 15px !important;
    margin-right: 15px !important;
  }
  .my-lg-def {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }
}

@media (min-width: 1200px) {
  .m-xl-def {
    margin: 15px !important;
  }
  .mt-xl-def {
    margin-top: 15px !important;
  }
  .mb-xl-def {
    margin-bottom: 15px !important;
  }
  .ml-xl-def {
    margin-left: 15px !important;
  }
  .mr-xl-def {
    margin-right: 15px !important;
  }
  .mx-xl-def {
    margin-left: 15px !important;
    margin-right: 15px !important;
  }
  .my-xl-def {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }
}