.apartments, .layout, .apartment_layout, .design {
  width: 100%;
  padding: 8.125rem 9.375rem;
  margin-bottom: 0;
}
.apartments {
  background: #fff;
}
.apartments .heading {
  color: #000;
}
@media screen and (max-width: 1200px) {
  .apartments, .layout, .apartment_layout, .design {
    padding: 8.125rem 6rem;
  }
}
@media screen and (max-width: 900px) {
  .apartments, .layout, .apartment_layout, .design {
    padding: 5.7rem 6.7rem;
  }
}
@media screen and (max-width: 600px) {
  .apartments, .layout, .apartment_layout, .design {
    padding: 5.7rem 1.7rem;
  }
}
.apartments .heading, .layout .heading, .apartment_layout .heading, .design .heading {
  padding-left: 8.625rem;
}
@media screen and (max-width: 1200px) {
  .apartments .heading, .layout .heading, .apartment_layout .heading, .design .heading {
    padding-left: 0rem;
  }
}
@media screen and (max-width: 900px) {
  .apartments .heading, .layout .heading, .apartment_layout .heading, .design .heading {
    padding-left: 0;
  }
}
.apartments .content, .layout .content, .apartment_layout .content, .design .content {
  font: 400 1rem "Open Sans";
  padding-left: 16.485rem;
  width: 62%;
  margin-bottom: 5rem;
  color: #000;
}
@media screen and (max-width: 1200px) {
  .apartments .content, .layout .content, .apartment_layout .content, .design .content {
    padding-left: 7.86rem;
  }
}
@media screen and (max-width: 900px) {
  .apartments .content, .layout .content, .apartment_layout .content, .design .content {
    padding-left: 0;
    width: 100%;
    margin-bottom: 4.3rem;
  }
}
.apartments .content p, .layout .content p, .apartment_layout .content p, .design .content p {
  margin: 0;
  padding: 0;
}
.apartments .content p:not(:last-child), .layout .content p:not(:last-child), .apartment_layout .content p:not(:last-child), .design .content p:not(:last-child) {
  margin-bottom: 1em;
}
@media screen and (max-width: 900px) {
  .apartments .content, .layout .content, .apartment_layout .content, .design .content {
    padding: 0;
    width: 100%;
    margin-bottom: 2.9rem;
  }
}

.apartments .gallery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.2rem;
  width: 100%;
}
@media screen and (max-width: 900px) {
  .apartments .gallery {
    display: flex;
    flex-direction: column-reverse;
    gap: unset;
  }
}
.apartments .gallery .card {
  display: flex;
  flex-direction: column;
  width: 100%;
}
@media screen and (max-width: 900px) {
  .apartments .gallery .card:not(:first-child) {
    margin-bottom: 1.45rem;
  }
}
.apartments .gallery .card .image {
  width: 100%;
  position: relative;
  padding-top: 129%;
  overflow: hidden;
}
.apartments .gallery .card .image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
}
.apartments .gallery .card .image .overflow_block {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  will-change: transform;
}
.apartments .gallery .card .additional_info {
  display: flex;
  flex-direction: column;
}
.apartments .gallery .card .additional_info .text {
  font: 600 1rem "Open Sans";
  font-style: italic;
}
@media screen and (max-width: 900px) {
  .apartments .gallery .card .additional_info .text {
    margin-bottom: 0;
  }
}
.apartments .gallery .card:nth-child(1) {
  padding-top: 3.81rem;
}
.apartments .gallery .card:nth-child(1) .image {
  margin-bottom: 3.125rem;
}
@media screen and (max-width: 900px) {
  .apartments .gallery .card:nth-child(1) {
    padding-top: 0;
  }
  .apartments .gallery .card:nth-child(1) .image {
    margin-bottom: 2rem;
  }
}
.apartments .gallery .card:nth-child(3) {
  padding-top: 12rem;
}
@media screen and (max-width: 900px) {
  .apartments .gallery .card:nth-child(3) {
    padding-top: 0;
  }
}
.apartments .slogan {
  right: 9.375rem;
}
@media screen and (max-width: 900px) {
  .apartments .slogan {
    right: 0;
  }
}

.layout {
  background: #A39382;
}
.layout .heading {
  color: #fff;
}
.layout .heading::before {
  border-color: #fff;
}
.layout .content {
  color: #fff;
}
.layout .slider .image {
  cursor: zoom-in;
}
.layout .layouts-switch {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.layout .layouts-switch .layouts-switch-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 9.375rem;
  margin-bottom: 1.25rem;
}
@media screen and (max-width: 900px) {
  .layout .layouts-switch .layouts-switch-header {
    padding: 0;
  }
}
.layout .layouts-switch .layouts-switch-header .layouts-button {
  color: #fff;
  font-weight: 400;
  font-size: 1rem;
  font-family: "Open Sans";
  line-height: 145%;
  cursor: pointer;
  opacity: 0.5;
  transition: 0.3s ease;
}
.layout .layouts-switch .layouts-switch-header .layouts-button:not(:last-child) {
  margin-right: 1.875rem;
}
.layout .layouts-switch .layouts-switch-header .layouts-button:hover {
  opacity: 0.7;
}
.layout .layouts-switch .layouts-switch-header .layouts-button.active {
  opacity: 1;
}
.layout .layouts-switch .layouts-switch-wrapper {
  width: 100%;
}
.layout .layouts-switch .layouts-switch-wrapper .slider {
  position: absolute;
  opacity: 0;
  transition: 0s ease;
  pointer-events: none;
}
.layout .layouts-switch .layouts-switch-wrapper .slider.active {
  position: relative;
  opacity: 1;
  transition: 0.3s ease;
  pointer-events: auto;
}

@media screen and (max-width: 900px) {
  .apartment_layout .content {
    margin-bottom: 4.3rem;
  }
}
.apartment_layout .layout_list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 8.625rem;
}
@media screen and (max-width: 1024px) {
  .apartment_layout .layout_list {
    padding: 0;
  }
}
@media screen and (max-width: 900px) {
  .apartment_layout .layout_list {
    padding: 0;
  }
}
.apartment_layout .layout_list .layout_card {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.apartment_layout .layout_list .layout_card:not(:last-child) {
  margin-bottom: 5.625rem;
}
@media screen and (max-width: 900px) {
  .apartment_layout .layout_list .layout_card {
    flex-direction: column;
  }
  .apartment_layout .layout_list .layout_card:not(:last-child) {
    margin-bottom: 4.3rem;
  }
}
.apartment_layout .layout_list .layout_card .layout_images, .apartment_layout .layout_list .layout_card .info {
  display: flex;
  flex-direction: column;
  width: 50%;
}
@media screen and (max-width: 900px) {
  .apartment_layout .layout_list .layout_card .layout_images, .apartment_layout .layout_list .layout_card .info {
    width: 100%;
  }
}
.apartment_layout .layout_list .layout_card .layout_images {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.apartment_layout .layout_list .layout_card .layout_images .active_image {
  position: relative;
  width: 100%;
  margin-bottom: 1rem;
  background: #F8F8F8;
}
@media screen and (max-width: 600px) {
  .apartment_layout .layout_list .layout_card .layout_images .active_image {
    margin-bottom: 1.1rem;
  }
}
.apartment_layout .layout_list .layout_card .layout_images .active_image .filler {
  width: 100%;
  padding-top: 100%;
}
.apartment_layout .layout_list .layout_card .layout_images .active_image img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  -o-object-fit: cover;
     object-fit: cover;
}
.apartment_layout .layout_list .layout_card .layout_images .thumbnails {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
@media screen and (max-width: 900px) {
  .apartment_layout .layout_list .layout_card .layout_images .thumbnails {
    margin-bottom: 2.9rem;
  }
}
.apartment_layout .layout_list .layout_card .layout_images .thumbnails .thumbnail {
  width: 4rem;
  height: 4rem;
  position: relative;
  background: #f8f8f8;
  cursor: pointer;
  margin-right: 0.8rem;
  margin-bottom: 0.8rem;
  border: 1px solid #fff;
  transition: 0.3s ease;
}
.apartment_layout .layout_list .layout_card .layout_images .thumbnails .thumbnail.active {
  border-color: #A39382;
}
@media screen and (max-width: 900px) {
  .apartment_layout .layout_list .layout_card .layout_images .thumbnails .thumbnail {
    width: 3.6rem;
    height: 3.6rem;
  }
}
.apartment_layout .layout_list .layout_card .layout_images .thumbnails .thumbnail .filler {
  width: 100%;
  padding-top: 100%;
}
.apartment_layout .layout_list .layout_card .layout_images .thumbnails .thumbnail img {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  padding: 0.3rem;
  -o-object-fit: contain;
     object-fit: contain;
}
.apartment_layout .layout_list .layout_card:nth-child(2n) {
  flex-direction: row-reverse;
}
@media screen and (max-width: 900px) {
  .apartment_layout .layout_list .layout_card:nth-child(2n) {
    flex-direction: column;
  }
}
.apartment_layout .layout_list .layout_card:nth-child(2n) .info {
  padding-left: 0;
  padding-right: 4.5rem;
}
@media screen and (max-width: 900px) {
  .apartment_layout .layout_list .layout_card:nth-child(2n) .info {
    padding-right: 0;
  }
}
.apartment_layout .layout_list .layout_card .info {
  padding-left: 4.5rem;
}
@media screen and (max-width: 900px) {
  .apartment_layout .layout_list .layout_card .info {
    padding: 0;
  }
}
.apartment_layout .layout_list .layout_card .info .title {
  margin: 0;
  padding: 0;
  font: 500 1rem "Lora";
  font-size: 1.45rem;
  margin-bottom: 2rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
@media screen and (max-width: 900px) {
  .apartment_layout .layout_list .layout_card .info .title {
    font-size: 1.3rem;
    margin-bottom: 1.43rem;
  }
}
.apartment_layout .layout_list .layout_card .info .description {
  margin: 0;
  padding: 0;
  font: 400 1rem "Open Sans";
  white-space: pre-wrap;
  margin-bottom: 2.5rem;
}
@media screen and (max-width: 900px) {
  .apartment_layout .layout_list .layout_card .info .description {
    margin-bottom: 2.3rem;
  }
}
.apartment_layout .layout_list .layout_card .info .props {
  display: flex;
  flex-direction: column;
}
.apartment_layout .layout_list .layout_card .info .props .prop {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.apartment_layout .layout_list .layout_card .info .props .prop:not(:last-child) {
  margin-bottom: 1.56rem;
}
@media screen and (max-width: 900px) {
  .apartment_layout .layout_list .layout_card .info .props .prop:not(:last-child) {
    margin-bottom: 1.43rem;
  }
}
.apartment_layout .layout_list .layout_card .info .props .prop img {
  width: 1.25rem;
  height: 1.25rem;
  -o-object-fit: contain;
     object-fit: contain;
}
@media screen and (max-width: 900px) {
  .apartment_layout .layout_list .layout_card .info .props .prop img {
    width: 1.1rem;
    height: 1.1rem;
  }
}
.apartment_layout .layout_list .layout_card .info .props .prop span {
  font: 400 1rem "Open Sans";
  margin-left: 1.25rem;
}
@media screen and (max-width: 900px) {
  .apartment_layout .layout_list .layout_card .info .props .prop span {
    margin-left: 1.1rem;
  }
}
.apartment_layout .hills {
  transform: scaleX(-1) translateY(-25%);
  right: 0;
}

.design {
  background: #A39382;
}
.design .heading {
  z-index: 1;
  color: #fff;
}
.design .heading::before {
  border-color: #fff;
}
.design .content {
  z-index: 1;
  color: #fff;
}
@media screen and (max-width: 900px) {
  .design .content {
    margin-bottom: 4.3rem;
  }
}
.design .gallery {
  z-index: 1;
}
@media screen and (max-width: 900px) {
  .design .gallery {
    display: flex;
    flex-direction: column;
  }
}
.design .gallery .image {
  width: calc(49.9% - 0.625rem);
  margin-right: 1.25rem;
  margin-bottom: 1.25rem;
  float: left;
  position: relative;
  padding-top: 30.4%;
  overflow: hidden;
}
@media screen and (max-width: 900px) {
  .design .gallery .image {
    width: 100%;
    margin-right: 0;
    margin-bottom: 1.45rem;
    padding-top: 66%;
  }
}
.design .gallery .image:nth-child(2) {
  margin-top: 3.9rem;
}
@media screen and (max-width: 900px) {
  .design .gallery .image:nth-child(2) {
    margin-top: 0;
  }
}
.design .gallery .image:nth-child(2n) {
  margin-right: 0;
  float: right;
}
.design .gallery .image:last-child {
  margin-bottom: 0;
}
.design .gallery .image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
}
.design .gallery .image .overflow_block {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #A39382;
  will-change: transform;
}
.design .hills {
  top: 0;
  right: 0;
  width: 50%;
  transform: scaleX(1) translateY(60%);
  z-index: 0;
}
@media screen and (max-width: 900px) {
  .design .hills {
    top: 10rem;
    left: 0;
    width: 130%;
    transform: scaleX(-1) translateY(25%);
    right: unset;
  }
}

#image_viewer {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  pointer-events: none;
}
#image_viewer .close_icon {
  position: fixed;
  right: 1rem;
  top: 1rem;
  opacity: 0;
  transition: 0.3s ease;
  cursor: pointer;
}
#image_viewer .close_wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  transition: 0.3s ease;
  opacity: 0;
}
#image_viewer .content {
  height: 100%;
  max-width: 90%;
  max-height: 90%;
  transition: 0.3s ease;
  opacity: 0;
  transform: translateY(15%);
}
@media screen and (max-width: 1024px) {
  #image_viewer .content {
    height: auto;
    width: 100%;
  }
}
#image_viewer .content #image {
  width: 100%;
  height: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
#image_viewer.active {
  pointer-events: auto;
}
#image_viewer.active .close_wrapper {
  opacity: 1;
}
#image_viewer.active .close_icon {
  opacity: 1;
}
#image_viewer.active .content {
  opacity: 1;
  transform: translateY(0);
}
#image_viewer .button {
  position: absolute;
  top: 0;
  height: 100%;
  width: 5%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
@media screen and (max-width: 600px) {
  #image_viewer .button {
    width: 10%;
  }
  #image_viewer .button img {
    width: 0.65rem;
  }
}
#image_viewer #viewer_prev {
  left: 0;
  transform: translateX(-100%);
}
@media screen and (max-width: 600px) {
  #image_viewer #viewer_prev {
    transform: translateX(-50%);
    justify-content: flex-start;
    padding-left: 1%;
  }
}
#image_viewer #viewer_next {
  right: 0;
  transform: translateX(100%);
}
#image_viewer #viewer_next img {
  transform: rotate(180deg);
}
@media screen and (max-width: 600px) {
  #image_viewer #viewer_next {
    transform: translateX(50%);
    justify-content: flex-end;
    padding-right: 1%;
  }
}