@import url("global-styles.css");

body {
  padding-top: 200px;
}

.image-collection-container {
  background-color: var(--lm-ImmoInvest-beige);
  padding: 0 0 50px 0;
  width: 75%;
  display: flex;
  justify-content: center;
}

.middle-images-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.image-collection {
  width: 800px;
  display: flex;
  gap: 20px;
}

.left-image,
.right-image {
  width: 45%;
  height: 520px;
  z-index: 10;
}

.top-middle-image,
.bottom-middle-image {
  height: 250px;
  z-index: 10;
}

.top-middle-image {
  background: var(--lm-ImmoInvest-white);
}

h1 {
  margin-left: 90%;
  margin-bottom: 30px;
}

.owner-seal {
  z-index: 25;
  position: relative;
  width: 125px;
  height: 125px;
  right: 145px;
  top: 76%;
}

/* Smartphones */
@media screen and (max-width: 767px) {
  .image-collection {
    width: 300px;
  }

  .top-middle-image,
  .bottom-middle-image {
    width: 80px;
    height: 120px;
  }

  .left-image,
  .right-image {
    height: 260px;
  }

  .image-collection-container {
    width: 80%;
    padding-top: 0;
  }

  h1 {
    margin-left: 74%;
  }

  .owner-seal {
    width: 75px;
    height: 75px;
    right: 95px;
    top: 71%;
  }
}

/* Tablets */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .image-collection {
    width: 550px;
  }

  .top-middle-image,
  .bottom-middle-image {
    width: 140px;
    height: 200px;
  }

  .left-image,
  .right-image {
    height: 420px;
  }

  .image-collection-container {
    width: 83%;
  }

  h1 {
    margin-left: 80%;
  }

  .owner-seal {
    right: 145px;
    top: 71%;
  }
}