section#header .hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    grid-gap: 5.5vw;
}

div.bedroom-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}

div.bedroom-container .gallery img {
    width: 75%;
    height: 100%;
    object-fit: cover;
}

#layouts .header-block {
    background: var(--brand-light);
    padding: 1em;
    padding-left: 7.5vw;
}

#layouts .unit-amenities ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#layouts .unit-amenities .headline {
    display: grid;
    align-items: center;
    grid-template-columns: auto 3fr;
    grid-gap: 1em;
}

#layouts .unit-amenities .headline hr {
    width: 100%;
    border: none;
    border-top: 3px dashed var(--brand-med-grey);
    height: 1px;
    margin-bottom: 3px;
}

#layouts .unit-amenities .headline small {
    color: var(--brand-dark);
    font-weight: 700;
    margin: 0;
}

#layouts .unit-amenities {
    margin-left: 7.5vw;
    margin-top: 2em;
    margin-right: 7.5vw;
}

#layouts .unit-amenities ul li p {
    margin: 0;
}

#layouts .unit-amenities li {
    margin-bottom: 2.5vw;
}

.addl-info {
    margin-top: 1em;
}

.addl-info > small:nth-of-type(2) {
    margin-left: 1em;
}

div#split-photo-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 25vw 15vw;
    grid-gap: 1.5vw;
    position: relative;
}

div#split-photo-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bg-img:nth-of-type(1) {
    background-position: 0% center;
    background-size: 300%;
    background-repeat:no-repeat;
 }

 .bg-img:nth-of-type(2) {
    background-position: 50% 55%;
    background-size: 300%;
    background-repeat:no-repeat;
    margin-bottom: -7.5%;
 }

 .bg-img:nth-of-type(3) {
    background-position: 100% center;
    background-size: 300%;
    background-repeat:no-repeat;
 }

div#split-photo-container img:nth-of-type(2) {
    margin-top: 7.5%;
}

section#header {
    padding-bottom: 7.5vw;
}

section#layouts {
    margin-bottom: 7.5vw;
}

.avail-units-toggle .btn-group a {
    background: var(--brand-light-grey);
    border: none;
    color: var(--brand-dark);
    font-size: 1.75vw;
    font-weight: 700;
    padding: 0.25em 1em;
    cursor: pointer;
    transition: .5s all ease-in-out;
    filter: drop-shadow(0px 0px 1px rgba(0,0,0,0.05));
    text-align: center;
    text-decoration: none;
}

.avail-units-toggle .btn-group {
    margin-top: 0.5em;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1.5vw;
}

.avail-units-toggle .btn-group a:hover,
.toggle-bar button:hover {
    filter: unset;
    transform: scale(.98);
}

.toggle-bar {
    margin-left: 7.5vw;
    background: var(--brand-light-grey);
    margin-top: 2.5vw;
    margin-bottom: 5vw;
    display: none;
}

.toggle-bar button {
    background: var(--brand-light);
    border: none;
    color: var(
    --brand-dark);
    font-size: 1.75vw;
    font-weight: 700;
    padding: 0.5em 1em;
    cursor: pointer;
    transition: .5s all ease-in-out;
    filter: drop-shadow(0px 0px 1px rgba(0,0,0,0.05));
    margin-right: 0.5em;
}

.toggle-bar .btn-group {
    display: flex;
    align-items: center;
    background: #fff;
    width: fit-content;
}

.full-units {
    border-collapse: collapse;
    width: calc(100% - 15vw);
    margin: auto;
    color: var(--brand-dark);
    text-align: center;
  }

  .full-units td, .full-units th {
    border: 1px solid var(--brand-light-grey);
    padding: 1.5vw;
  }

  .full-units tr:nth-child(even){background-color: #f2f2f2;}

  .gallery {
    padding: 12.5%;
    text-align: center;
}

button.fp-image {
    background: #fff;
    border: none;
    width: 5vw;
    border: solid 1px var(--brand-light-grey);
    padding: 0.5vw;
    height: 5vw;
    border-radius: 5px;
    filter: drop-shadow(0px 3px 3px rgba(0,0,0,0.05));
    margin-right: 2.5vw;
    overflow: inherit;
}

button.fp-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

table.full-units tbody > tr td:nth-of-type(3) {
    display: flex;
    align-items: center;
    justify-content: center;
}

.table-wrapper {
    position:relative;
    margin-bottom: 7.5vw;
  }

  .table-scroll {
    height:25vw;
    overflow:auto;
    margin-top:5.5vw;
    margin: 0 7.5vw;
  }
  .table-wrapper table {
    width: calc(100vw - 7.5vw * 2);
    margin: auto;
  }

  section#amenities > h2.centered-title {
    margin-bottom: 5.5vw;
}

div#unit-modal {
    position: fixed;
    width: 60%;
    height: 80%;
    background: #fff;
    top: 15%;
    left: 20%;
    z-index: 8;
    border-radius: 5px;
    display: none;
}

div#modal-overlay {
    content: "";
    background: var(--brand-dark);
    opacity: 0.75;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    z-index: 7;
    display: none;
    cursor: pointer;
}

div#unit-modal img {
    width: 100%;
    height: 95%;
    object-fit: contain;
    padding-bottom: 5%;
    padding-top: 5%;
}

.modal-inner {overflow-y: scroll;position: relative;height: 100%;width: 100%;}

.modal-inner > div {
    display: flex;
    align-items: start;
    margin-left: 2.5vw;
    flex-direction: column;
    margin-right: 2.5vw;
}

#unit-modal small.badge {
    height: fit-content;
    width: fit-content;
    margin-bottom: 0;
}

div#unit-modal h3.centered {
    margin-bottom: 0;
}

.modal-inner > div.img-container {
    /* margin: auto; */
    display: grid;
    /* align-items: center; */
    /* justify-items: center; */
    height: 100%;
    margin-top: 0;
    width: auto;
}
#unit-modal .top {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}

button#modal-close {
    color: var(--brand-dark);
    background: no-repeat;
    border: none;
    font-size: 2vw;
    margin-top: 1em;
    cursor:pointer;
}

@media screen and (max-width: 767px) {
    div.bedroom-container {
        grid-template-columns: 1fr;
    }

    #layouts .unit-amenities li {
        margin-bottom: 7.5vw;
    }
    section#header .hero-container {
        grid-template-columns: 1fr;
    }

    section#header .hero-text {
        position: relative;
        padding: 7.5vw;
    }

    .avail-units-toggle .btn-group {
        grid-template-columns: 1fr;
    }

    .avail-units-toggle .btn-group a {
        font-size: clamp(20px, 5.5vw, 1em);
        padding: 2vw 2.5vw;
    }

    .avail-units-toggle .btn-group a:first-of-type {
        margin-bottom: 2.5vw;
    }
    .toggle-bar button {
        font-size: clamp(20px, 5.5vw, 1em);
        padding: 2vw 2.5vw;
    }
    .table-scroll {
        height: 65vw;
    }
    .table-scroll .link {
        font-size: 4.5vw;
    }
    div#unit-modal {
        height: 70%;
    }
    div#split-photo-container {
        grid-template-rows: 45vw 25vw;
    }
}