#primary .container{max-width:1400px}#image-gallery{aspect-ratio:40/55;height:auto;display:grid;grid-gap:2px;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(4,1fr);@media screen and (min-width:600px){height: calc(100vh - 150px); aspect-ratio: auto;}@media screen and (min-width:1024px){height: auto; aspect-ratio: 200 / 65; grid-template-columns: repeat(4,1fr); grid-template-rows: repeat(2,1fr);}& > div { position: relative; overflow: hidden; & img { object-fit: cover; object-position: center; block-size: 100%; inline-size: 100%; } } & .photo-1 { grid-area: 1 / 1 / 3 / 3; } & .photo-2 { grid-area: 3 / 1 / 4 / 2; background-color: #e2e2e2; @media screen and (min-width: 1024px){ grid-area: 1 / 3 / 2 / 4; } } & .photo-3 { grid-area: 3 / 2 / 4 / 3; background-color: #e6e6e6; @media screen and (min-width: 1024px){ grid-area: 1 / 4 / 2 / 5; } } & .photo-4 { grid-area: 4 / 1 / 5 / 2; background-color: #e9e9e9; @media screen and (min-width: 1024px){ grid-area: 2 / 3 / 3 / 4; } } & .photo-5 { grid-area: 4 / 2 / 5 / 3; background-color: #dfdfdf; position: relative; @media screen and (min-width: 1024px){ grid-area: 2 / 4 / 3 / 5; } } & .photo-5:after { content: ''; background: rgba(255,255,255,0.5); position: absolute; } & > div.floor-plan { background: #FFF; & > img { object-fit: contain; } } & a { display: block; line-height: 1; position: relative; height: 100%; &:focus { outline: 2px dashed #000; outline-offset: -2px; } & .view-photo { display: flex; position: absolute; top:0; left:0; width:100%; height:100%; z-index: 100; background: rgba(255,255,255,0.75); font-size: 2rem; justify-content: center; align-items: center; transition: all ease 0.5s; } }}#image-gallery div:not(.photo-5) a .view-photo{opacity:0}#image-gallery .photo-5 a .view-photo{font-size:1.8rem}#image-gallery .photo-5 a .view-photo i.fa-light{margin-right:10px}#image-gallery div:not(.photo-5) a:hover .view-photo,#image-gallery div:not(.photo-5) a:focus .view-photo,#image-gallery .photo-5 a:hover .view-photo,#image-gallery .photo-5 a:focus .view-photo{opacity:1;background-color:rgba(255,255,255,.8);text-decoration:underline}.inline-gallery-button{position:relative;z-index:100;margin-bottom:1.5em;@media screen and (min-width:600px){margin-top: -3em; margin-bottom: 3em;}& button, & a.button { display: block; width: 95%; margin: 0 auto 15px; box-shadow: 0 0 5px rgba(0,0,0,0.5); & i { margin-right: 8px; } @media screen and (min-width: 500px){ display: inline-block; margin: 0; width: auto; &:nth-child(2){ margin-left: 10px; } } }}.modal-inline-wrapper{display:none}#apartment-slider{padding-inline:0;padding-bottom:50px;max-width:calc(100vw - 120px);overflow:hidden;margin-inline:auto;@media screen and (min-width:600px){padding-inline: 50px; padding-bottom: 0;}@media screen and (min-width:900px){padding-inline: 100px;}& .slick-slide > div { aspect-ratio: 3/2; & img { object-fit: contain; object-position: center; block-size: 100%; inline-size: 100%; } } .tour-wrapper.embed-container { margin-bottom: 0; }}.slick-arrow{border-radius:50%;aspect-ratio:1;padding:10px;font-size:1.375rem;position:absolute;bottom:0;z-index:100;&.slick-prev { left: calc(50% - 50px); } &.slick-next { right: calc(50% - 50px); } &.slick-disabled { background: #C9C9C9; cursor: not-allowed; } @media screen and (min-width: 600px){ top: 50%; transform: translateY(-50%); bottom: auto; &.slick-prev { left: 0; } &.slick-next { right: 0; } }}.quick-stats{border:1px solid #c9c9c9;& div.price { flex-basis: 100%; text-align: center; font-family: DM Sans; font-weight: 500; font-size: 1.375rem; margin-bottom: 1.5rem; & strong { font-size: 2rem; } & span.address { display: block; font-size: 1.25rem; } @media screen and (min-width: 1040px){ flex-basis: auto; text-align: left; margin-bottom: 0; } } & div.quick-stat { flex-basis: 45%; margin-bottom: 1.5rem; @media screen and (min-width: 600px){ flex-basis: auto; margin-bottom: 0; } } & div.quick-stat strong, & div.quick-stat i { display: block; } & div.quick-stat strong { font-size: 1.25rem; font-family: 'DM Sans', sans-serif; font-weight: 600; } & div.quick-stat i { color: var(--green); font-size: 2.5rem; margin-bottom: 0.5rem; }}.apartment-details-wrapper{height:100%;& .container > .flexed { display: block; @media screen and (min-width: 1024px){ display: flex; align-items: flex-start; } }}.apartment-contact{border:1px solid #c9c9c9;& h2 { font-size: 2.5rem; text-transform: uppercase; } & p { font-size: 0.875rem; margin-bottom: 1.25rem; } & i { color: var(--green); display: block; margin: 0 auto 0.5rem; @media screen and (min-width: 375px){ display: inline-block; margin: 0 10px 0 0; } } & a.button { display: block; width: 100%; } @media screen and (min-width: 345px){ & p { font-size: 1rem; } } @media screen and (min-width: 1024px){ flex-basis: 380px; position: sticky; top: 155px; } @media screen and (min-width: 1200px){ flex-basis: 425px; & h2 { font-size: 2.875rem; } & p { font-size: 1.125rem; } }}.apartment-details{flex-basis:calc(100% - 420px);@media screen and (min-width:1200px){flex-basis: calc(100% - 500px);}}.accordion-section .accordion-item{padding-bottom:1.5em;border-bottom:1px solid #c9c9c9;margin-bottom:1.5em;& details summary::-webkit-details-marker { display:none; } & summary.accordion-title { position: relative; display: block; cursor: pointer; } & summary.accordion-title h3 { font-size: clamp(1.25rem, .9259vw + 1.0648rem, 1.875rem); margin-bottom: 0; padding-right: 40px; text-transform: uppercase; } & summary.accordion-title:after { content: '\f107'; font-family: 'Font Awesome 6 Sharp'; position: absolute; right: 0; top: 0; line-height: 1; font-size: 1rem; background-color: var(--green); color: #FFF; aspect-ratio: 1; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } & details[open] summary.accordion-title:after { content: '\f106'; } & details.accordion .accordion-content { padding: 2em 0 0.5em 0; @media screen and (min-width: 1024px) { padding: 2em 55px 0.5em 0; } }}.map-wrapper p{text-align:center;@media screen and (min-width:800px){text-align: left;}}#highlights{gap:30px;.highlight { & i { color: var(--green); margin-right: 5px; } }}