/* Compact house and information tags, in two separate rows. */
.villa-options-section{padding-top:1rem;padding-bottom:1rem}
.villa-selector__houses,.villa-selector__info{display:flex;flex-wrap:wrap;gap:.6rem}
.villa-selector__info{margin-top:.7rem}
.villa-selector a{display:block;padding:.65rem 1rem;border:1px solid rgba(232,255,203,.3);border-radius:8px;background:rgba(14,27,12,.7);color:#e4f8c6;text-decoration:none}
.villa-selector a:hover,.villa-selector a.active{background:#355a2b;color:#fff;border-color:#85c878}
.villa-selector a:focus-visible{outline:3px solid #c7f3a6;outline-offset:3px}
#villa-content{scroll-margin-top:110px;padding-top:1rem}
#villa-section-title{margin-top:0;margin-bottom:1rem}
/* Independent columns close the gaps left by unequal card heights. */
#villa-content .portfolio-grid{display:block;columns:3;column-gap:1rem}
#villa-content .portfolio-card{display:inline-flex;width:100%;box-sizing:border-box;break-inside:avoid;vertical-align:top;margin:0 0 1rem;min-height:0}
#villa-content .portfolio-card__body{padding:.85rem}
#villa-content .portfolio-card__body--top{padding-bottom:.55rem}
#villa-content .portfolio-card__body--text{padding-top:0}
#villa-content .portfolio-card__media{padding:0 .85rem .7rem;gap:.55rem}
@media(max-width:1000px){#villa-content .portfolio-grid{columns:2}}
@media(max-width:620px){#villa-content .portfolio-grid{columns:1}.villa-selector a{padding:.6rem .8rem}}

/* Reduce the vertical gaps around the introductory copy and section tags. */
.page-hero.villa-heading{min-height:0;padding-bottom:0;margin-bottom:0}
.page-hero.villa-heading .page-hero__content{padding-bottom:.25rem}
.page-hero.villa-heading + .villa-intro{padding-top:.35rem;padding-bottom:.55rem}
.villa-intro .content-panel{padding-top:1rem;padding-bottom:1rem}
.villa-intro .content-panel p:first-child{margin-top:0}
.villa-intro .content-panel p:last-child{margin-bottom:0}
.villa-intro + .villa-options-section{padding-top:.35rem;padding-bottom:.6rem}
#villa-content .portfolio-grid{column-fill:balance}

/* Place cards from the top into the shortest column, with columns as a no-script fallback. */
#villa-content .portfolio-grid{--villa-columns:3;--villa-gap:16px}
#villa-content .portfolio-grid.villa-masonry{position:relative;columns:auto;display:block}
#villa-content .villa-masonry > .portfolio-card{position:absolute;top:0;left:0;margin:0;width:calc((100% - (var(--villa-columns) - 1) * var(--villa-gap)) / var(--villa-columns))}
@media(max-width:1000px){#villa-content .portfolio-grid{--villa-columns:2}}
@media(max-width:620px){#villa-content .portfolio-grid{--villa-columns:1}}