.isotope-item{
  max-width: calc(100%/3 - 20px);
  margin-right: 20px;
  margin-bottom: 20px;
  width: 100%;
}

.isotope-item > img{
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.filter{
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.filter > .filter--header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.125rem;
  font-weight: bold;
}

.filter > .filter__container{
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.filter > select{
  border: 1px solid #f1f1f1;
  border-radius: 1rem;
  box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.05);
  cursor: pointer;
}

.filter--search{
  position: relative;
}

.filter--search > span{
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  padding-bottom: .75rem;
}

.filter--search > input{
  border: 0px;
  border-bottom: 2px solid #ccc;
  padding: 1rem;
  border-radius: 0px;
  box-shadow: none;
}

.isotope-pager{
  display: flex !important;
  flex-direction: row;
  justify-content: center;
  gap: 1rem;
}

.isotope-pager a{
  font-weight: 300;
  font-size: 1.25rem;
  cursor: pointer;
}

.isotope-pager a.active{
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.isotope-pager a.disabled{
  opacity: 0.5;
}

.isotope-pager a.next,
.isotope-pager a.prev{
  display: flex;
  align-items: center;
}

.isotope-pager a.next svg{
  transform: rotateZ(-90deg);
  margin-left: 0.5rem;
}

.isotope-pager a.prev svg{
  transform: rotateZ(90deg);
  margin-right: 0.5rem;
}

{# Extras #}
.body-container-wrapper .cm-row2-savannahs-home-top-grp, 
.body-container-wrapper .content-with-right-image-wrp, 
.body-container-wrapper .hs-image-with-light-box-group, 
.body-container-wrapper .hs-the-floor-plan-wrp,
.body-container-wrapper .cm-bookmark-list,
.body-container-wrapper .content-wih-right-image-inner{
  margin: 0 !important;
  border: unset !important;
}

@media screen and (min-width: 768px){
  .filter > .filter--header svg{
    display: none;
  }
}


@media screen and (max-width: 767px){

  .isotope-item{
    max-width: 100%;
    margin-right: 0;
    margin-bottom: 20px;
    width: 100%;
  }

  .filter--top {
    cursor: pointer;
  }

  .filter > .filter--top:not(.active) ~ .filter__options{
    width: 100%;
    height: 100%;
    opacity: 0;
    max-height: 0;
    z-index: -9999;
    transition: all 0.3s ease-out;
  }

  .filter > .filter--top.active ~ .filter__options{
    width: 100%;
    z-index: 1;
    opacity: 1;
    max-height: 100vh;
    transition: all 0.3s ease-out;
  }

}