@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Orbitron:wght@400..900&display=swap");

@font-face {
  font-family: "South Atlanta";
  src: url("https://db.onlinewebfonts.com/t/31c99871b123b2fd356088727e215a26.eot");
  src: url("https://db.onlinewebfonts.com/t/31c99871b123b2fd356088727e215a26.eot?#iefix")
      format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/31c99871b123b2fd356088727e215a26.woff2")
      format("woff2"),
    url("https://db.onlinewebfonts.com/t/31c99871b123b2fd356088727e215a26.woff")
      format("woff"),
    url("https://db.onlinewebfonts.com/t/31c99871b123b2fd356088727e215a26.ttf")
      format("truetype"),
    url("https://db.onlinewebfonts.com/t/31c99871b123b2fd356088727e215a26.svg#South Atlanta")
      format("svg");
}

body {
  /* background-image: url(https://static.wixstatic.com/media/0bf8ce_3b614f2bc930453fb606def53dc2f33d~mv2.jpg/v1/fill/w_288,h_180,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_avif,quality_auto/0bf8ce_3b614f2bc930453fb606def53dc2f33d~mv2.jpg); */
  /* background-size: contain; */
  background: transparent;
}

#rentalContainer > .rentalBox:nth-child(odd) {
  background-color: rgba(96, 94, 94, 0.274);
}

/* //////////////////////////////////////////////////////////////////////////////////////// */
/* ///// Data ///////// */
/* //////////////////////////////////////////////////////////////////////////////////////// */

.rentalBox {
  margin: 0px 0px 65px 0px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  max-width: 50rem;
  padding-inline: 3rem;
  padding-block: 2rem;

  display: flex;
  font-family: "Cormorant Garamond";
}

.rentalBox > * {
  flex-grow: 1;
  max-width: 50%;
}

.rentalBox .rentalTitle {
  text-shadow: #c8c8c8 1px 1px 0px, #b4b4b4 0px 2px 0px, #a0a0a0 0px 3px 0px,
    rgba(140, 140, 140, 0.498039) 0px 4px 0px, #787878 0px 0px 0px,
    rgba(0, 0, 0, 0.498039) 0px 5px 10px;
  font-size: 30px;
  font-weight: normal;
}

.rentalBox .teleport {
  font-size: 1.3rem;
  text-align: right;
  display: block;

  width: fit-content;
  padding-inline: 1.3rem;
  padding-block: 0.4rem;

  border: 0.2rem double white;

  text-decoration: none;
  color: white;
  font-weight: 500;
  background-color: gray;
  transition: 0.2s;

  letter-spacing: 0.2rem;
}
.rentalBox .teleport:hover {
  border: 0.2rem solid rgb(11, 47, 91);
  color: rgb(85, 85, 85);
  background-color: white;
}

/* //////////////////////////////////////////////////////////////////////////////////////// */
/* ///// Images ///////// */
/* //////////////////////////////////////////////////////////////////////////////////////// */

.rentalImages {
  padding-right: 5rem;
}
.rentalImages img {
  object-fit: cover;
}

.rentalImages .main {
  position: relative;
  overflow: hidden;
}
.rentalBox.rented .rentalImages .main::before {
  content: "Rented";
  font-size: 2.4rem;
  transform: rotate(45deg);
  position: absolute;
  right: -4rem;
  top: 1.5rem;
  background-color: red;
  padding-left: 5rem;
  padding-right: 4rem;
  padding-block: 0.6rem;
  font-family: "Cormorant Garamond";
  color: #fff;
}

.rentalImages .main img {
  width: 100%;
  aspect-ratio: 1.6;
}

.rentalImages .ImgRow {
  margin-top: 0.7rem;
  max-width: 100%;
  display: flex;
  justify-content: start;
  flex-wrap: nowrap;
  column-gap: 1rem;
}

.rentalImages .ImgRow > img {
  flex-grow: 1;
  max-width: 30%;
  aspect-ratio: 1;
}