@charset "UTF-8";
:root {
  --green:#243a2b;
  --green-deep:#1d3023;
  --ink:#26332a;
  --muted:#667066;
  --paper:#fbfaf7;
  --stone:#eeeee7;
  --line:#d9ddd3;
  --cream:#f3efdc;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"DM Sans",Arial,sans-serif;
  --gutter:clamp(24px,5.5vw,88px)
}

*,*::before,*::after {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:108px
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 16px/1.7 var(--sans);
  -webkit-font-smoothing:antialiased
}

body.dialog-open {
  overflow:hidden
}

button,input,select {
  font:inherit
}

button,a {
  -webkit-tap-highlight-color:transparent
}

button {
  cursor:pointer
}

a {
  color:inherit;
  text-decoration:none
}

button {
  color:inherit
}

button:disabled {
  cursor:default
}

img,video {
  display:block;
  width:100%;
  max-width:100%;
  object-fit:cover
}

img {
  height:auto
}

figure,p,h1,h2,h3 {
  margin:0
}

button {
  border:0;
  background:none
}

button[hidden],[hidden] {
  display:none!important
}

::selection {
  background:#c9d0b4;
  color:var(--green)
}

:focus-visible {
  outline:3px solid #8b9e60;
  outline-offset:6px
}

.container {
  width:100%;
  max-width:1600px;
  padding-inline:var(--gutter);
  margin-inline:auto
}

.section {
  padding-block:108px
}

.eyebrow {
  display:block;
  font-size:12px;
  font-weight:500;
  letter-spacing:.2em;
  line-height:1.6;
  color:#526349;
  margin-bottom:20px
}

.eyebrow.light {
  color:#e7e9da
}

h1,h2,h3 {
  font-family:var(--serif);
  font-weight:400;
  line-height:1.04;
  letter-spacing:-.035em
}

h2 {
  font-size:clamp(42px,4.6vw,70px)
}

h2 em,h1 em {
  font-weight:400
}

h3 {
  font-size:32px;
  letter-spacing:-.025em
}

p {
  max-width:70ch
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  min-height:54px;
  padding:15px 28px;
  font-size:14px;
  font-weight:500;
  line-height:1.4;
  border:1px solid transparent;
  transition:background .2s,color .2s,transform .2s
}

.button:hover {
  transform:translateY(-2px)
}

.button-cream {
  color:var(--green);
  background:var(--cream)
}

.button-cream:hover {
  background:white
}

.button-green {
  background:var(--green);
  color:white
}

.button-green:hover {
  background:#3c553e
}

.button-outline {
  border-color:#87927c
}

.button-outline:hover {
  background:var(--green);
  color:white
}

.button-light-outline {
  border-color:#9da999;
  color:white
}

.button-light-outline:hover {
  background:#ffffff12
}

.text-button {
  padding:0;
  font-size:14px;
  text-decoration:underline;
  text-underline-offset:5px
}

.text-link {
  display:inline-block;
  border-bottom:1px solid #9ba490;
  padding-bottom:3px;
  font-size:14px;
  margin-top:22px
}

.text-link:hover {
  color:#5d703e
}

.skip-link {
  position:fixed;
  top:-100px;
  left:20px;
  z-index:100;
  background:white;
  padding:12px 20px
}

.skip-link:focus {
  top:12px
}

.header {
  height:108px;
  position:absolute;
  z-index:20;
  inset:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-inline:var(--gutter);
  color:white;
  border-bottom:1px solid #ffffff25;
  transition:background .25s,color .25s,box-shadow .25s
}

.header.scrolled {
  position:fixed;
  height:82px;
  background:var(--paper);
  color:var(--green);
  border-color:var(--line);
  box-shadow:0 3px 20px #15261b08
}

.brand {
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0
}

.brand-mark {
  width:35px;
  height:44px;
  stroke:currentColor;
  stroke-width:1.25
}

.brand>span {
  font:400 31px/.95 var(--serif);
  letter-spacing:-.035em
}

.brand small {
  display:block;
  font:400 12px/1.6 var(--sans);
  letter-spacing:.25em;
  margin-top:9px
}

.navigation {
  display:flex;
  align-items:center;
  gap:34px;
  font-size:14px
}

.navigation>a {
  padding-block:10px;
  position:relative
}

.navigation>a:not(.nav-book)::after {
  content:"";
  position:absolute;
  bottom:3px;
  left:0;
  right:100%;
  height:1px;
  background:currentColor;
  transition:right .2s
}

.navigation>a:hover::after {
  right:0
}

.navigation .nav-book {
  margin-left:8px;
  padding:12px 22px;
  border:1px solid #ffffff65;
  display:flex;
  gap:28px;
  align-items:center
}

.nav-book:hover {
  background:#ffffff13
}

.scrolled .nav-book {
  background:var(--green);
  color:white
}

.menu-toggle {
  display:none;
  padding:12px;
  width:48px;
  height:48px
}

.menu-toggle span {
  display:block;
  height:1px;
  background:currentColor;
  margin:7px 0;
  transition:transform .2s
}

.hero {
  min-height:780px;
  height:100svh;
  max-height:1100px;
  position:relative;
  background:#30432f;
  color:#fff;
  overflow:hidden
}

.hero-image,.hero-shade {
  position:absolute;
  inset:0;
  height:100%;
  width:100%
}

.hero-image {
  object-position:60% 62%
}

.hero-shade {
  background:linear-gradient(90deg,rgba(13,29,20,.67),rgba(15,29,20,.22) 58%,rgba(15,29,20,.07)),linear-gradient(180deg,rgba(11,26,17,.35),transparent 35%,rgba(12,26,18,.1) 68%,rgba(12,26,18,.48))
}

.hero-content {
  position:relative;
  padding-top:clamp(192px,24svh,270px);
  padding-bottom:180px
}

.hero .eyebrow {
  font-size:12px;
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:24px
}

.little-line {
  display:inline-block;
  width:32px;
  height:1px;
  background:#dbe0ce
}

h1 {
  font-size:clamp(82px,8.5vw,132px);
  line-height:.94;
  letter-spacing:-.035em;
  text-shadow:0 2px 35px #14201415
}

h1 em {
  color:#f1eed5
}

.hero-description {
  font-size:16px;
  line-height:1.8;
  color:#f3f4ed;
  margin-top:28px
}

.hero-actions {
  display:flex;
  gap:30px;
  align-items:center;
  margin-top:34px
}

.film-button {
  display:flex;
  gap:12px;
  align-items:center;
  font-size:14px;
  padding:6px 0;
  color:#fff
}

.play-circle {
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid #ffffff80;
  display:grid;
  place-items:center;
  font-size:12px;
  padding-left:2px;
  transition:background .2s
}

.film-button:hover .play-circle {
  background:#ffffff20
}

.hero-bottom {
  position:absolute;
  bottom:34px;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:space-between
}

.scroll-cue {
  font-size:12px;
  letter-spacing:.18em;
  display:flex;
  align-items:center;
  gap:18px
}

.scroll-cue>span {
  height:40px;
  width:1px;
  background:#ffffff60;
  position:relative
}

.scroll-cue>span::after {
  content:"";
  position:absolute;
  bottom:0;
  left:-3px;
  width:7px;
  height:7px;
  border-bottom:1px solid white;
  border-right:1px solid white;
  transform:rotate(45deg)
}

.hero-bottom-actions {
  display:flex;
  align-items:center;
  gap:20px
}

.gallery-peek {
  display:flex;
  align-items:center;
  gap:15px;
  padding:8px 16px 8px 8px;
  border:1px solid #ffffff45;
  background:#1d30252b;
  backdrop-filter:blur(8px);
  font-family:var(--serif);
  font-size:21px;
  line-height:1.2
}

.gallery-peek img {
  width:68px;
  height:54px
}

.gallery-peek small {
  display:block;
  font:400 12px/1.8 var(--sans);
  letter-spacing:.04em;
  margin-top:3px
}

.gallery-symbol {
  font:25px var(--sans);
  margin-left:18px
}

.house-facts {
  display:grid;
  grid-template-columns:1.8fr repeat(4,1fr);
  align-items:center;
  padding-block:32px;
  border-bottom:1px solid var(--line)
}

.house-facts>div:not(:first-child) {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  border-left:1px solid var(--line)
}

.house-facts strong {
  font:400 44px/1 var(--serif)
}

.house-facts span:not(.eyebrow) {
  font-size:13px
}

.house-facts .eyebrow {
  margin-bottom:3px;
  font-size:12px
}

.facts-heading>span:last-child {
  font-family:var(--serif);
  font-size:24px
}

.intro-heading {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:9%;
  align-items:end;
  margin-bottom:56px
}

.intro-copy {
  color:var(--muted);
  font-size:15px;
  line-height:1.9;
  padding-bottom:5px
}

.intro-copy p+p {
  margin-top:17px
}

.house-story {
  display:grid;
  grid-template-columns:1.65fr 1fr;
  gap:42px;
  align-items:start
}

.story-main>.image-link>img {
  height:510px;
  object-position:50% 50%
}

.story-main figcaption {
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:12px;
  color:var(--muted);
  padding-top:15px
}

.story-main figcaption>span:first-child {
  letter-spacing:.14em;
  font-size:12px
}

.story-side {
  margin-top:78px
}

.story-side>.image-link>img {
  height:420px;
  object-position:center 55%
}

.story-side>p {
  font:400 36px/1.13 var(--serif);
  padding:24px 0 0 4px;
  letter-spacing:-.02em
}

.staying {
  background:var(--stone)
}

.section-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:50px;
  margin-bottom:48px
}

.section-heading>p {
  max-width:360px;
  color:var(--muted);
  font-size:15px;
  padding-bottom:4px
}

.rooms-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px
}

.photo-link {
  display:block;
  position:relative;
  overflow:hidden
}

.photo-link img {
  aspect-ratio:1.25;
  height:auto;
  transition:transform .6s
}

.photo-link:hover img {
  transform:scale(1.04)
}

.photo-expand {
  position:absolute;
  bottom:14px;
  right:14px;
  width:35px;
  height:35px;
  display:grid;
  place-items:center;
  background:#ffffffd9;
  color:var(--green);
  font-size:19px
}

.room-caption {
  padding-top:22px
}

.room-caption .eyebrow {
  font-size:12px;
  letter-spacing:.16em;
  margin-bottom:9px
}

.room-caption p {
  font-size:14px;
  color:var(--muted);
  margin-top:12px;
  line-height:1.8
}

.amenities {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  padding-block:42px;
  margin-top:48px;
  border-top:1px solid #cdd3c5;
  border-bottom:1px solid #cdd3c5
}

.amenities>div {
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:14px;
  text-align:center;
  font-size:12px
}

.amenities svg {
  width:30px;
  height:30px;
  stroke:#516549;
  stroke-width:1.2;
  fill:none
}

.all-amenities {
  font-size:14px
}

.all-amenities summary {
  cursor:pointer;
  padding-block:22px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  list-style:none
}

.all-amenities summary::-webkit-details-marker {
  display:none
}

.all-amenities summary span {
  font-size:23px;
  line-height:1;
  transition:transform .2s
}

.all-amenities[open] summary span {
  transform:rotate(45deg)
}

.all-amenities>div {
  padding-bottom:10px;
  color:var(--muted)
}

.all-amenities p+p {
  margin-top:12px
}

.film-section {
  position:relative;
  color:white;
  min-height:630px;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:var(--green)
}

.film-section>img,.film-shade {
  position:absolute;
  inset:0;
  width:100%;
  height:100%
}

.film-section>img {
  object-position:center
}

.film-shade {
  background:linear-gradient(#18342138,#12281a77)
}

.film-content {
  position:relative;
  text-align:center;
  padding:80px 24px
}

.film-content h2 {
  font-size:clamp(45px,5.4vw,80px)
}

.large-play {
  display:grid;
  place-items:center;
  width:76px;
  height:76px;
  border:1px solid #ffffff9a;
  border-radius:50%;
  color:white;
  margin:34px auto 20px;
  transition:background .2s,transform .2s;
  font-size:20px;
  padding-left:8px
}

.large-play:hover {
  background:#ffffff22;
  transform:scale(1.07)
}

.film-content>p:not(.eyebrow) {
  font-size:13px;
  margin:auto
}

.film-content>p>span {
  display:inline-block;
  border-left:1px solid #ffffff60;
  padding-left:13px;
  margin-left:10px;
  font-size:12px
}

.light-link {
  color:#f3f5e9;
  font-size:12px;
  margin-top:24px
}

.experiences {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10%;
  align-items:center
}

.experience-copy>p:not(.eyebrow) {
  margin-top:28px;
  color:var(--muted);
  font-size:15px
}

.experience-list {
  margin-top:36px
}

.experience-list>div {
  display:flex;
  align-items:start;
  gap:20px;
  border-top:1px solid var(--line);
  padding:18px 0
}

.experience-list>div>span {
  font:italic 22px var(--serif);
  color:#829073;
  padding-top:4px
}

.experience-list p {
  font-size:13px;
  color:var(--muted)
}

.experience-list strong {
  display:block;
  color:var(--ink);
  font-weight:500;
  font-size:15px;
  margin-bottom:3px
}

.season-story {
  position:relative;
  height:660px;
  background:#41583d;
  overflow:hidden
}

.season-story>img,.season-overlay {
  position:absolute;
  inset:0;
  height:100%
}

.season-story>img {
  object-position:center 50%;
  transition:opacity .3s
}

.season-overlay {
  width:100%;
  background:linear-gradient(transparent 30%,#122718bb)
}

.season-story figcaption {
  position:absolute;
  bottom:34px;
  left:34px;
  right:34px;
  color:white
}

.season-story .eyebrow {
  font-size:12px;
  margin-bottom:14px
}

.season-story h3 {
  font-size:46px;
  max-width:340px
}

.season-tabs {
  display:flex;
  gap:6px;
  border-top:1px solid #ffffff5e;
  padding-top:22px;
  margin-top:26px
}

.season-tabs>button {
  min-height:38px;
  font-size:12px;
  padding:6px 18px;
  border:1px solid transparent;
  color:white
}

.season-tabs>button[aria-pressed="true"] {
  border-color:#fffffff0;
  background:#ffffff12
}

.season-tabs>button:hover {
  background:#ffffff20
}

.gallery-section {
  background:#f1f1eb
}

.gallery-section .section-heading {
  margin-bottom:36px
}

.gallery-toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:30px;
  border-bottom:1px solid #d5dacd
}

.gallery-filters {
  display:flex;
  gap:30px;
  flex-wrap:wrap
}

.gallery-filters>button {
  padding:12px 0 16px;
  border-bottom:2px solid transparent;
  font-size:13px;
  color:var(--muted)
}

.gallery-filters>button[aria-pressed="true"] {
  border-color:var(--green);
  color:var(--green)
}

.gallery-count {
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
  padding-bottom:6px
}

.gallery-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px
}

.gallery-item {
  position:relative;
  display:block;
  overflow:hidden;
  background:#d9ded1;
  aspect-ratio:1.3;
  isolation:isolate
}

.gallery-item img {
  height:100%;
  transition:transform .6s
}

.gallery-item:hover img {
  transform:scale(1.05)
}

.gallery-item::after {
  content:"";
  position:absolute;
  inset:35% 0 0;
  background:linear-gradient(transparent,#10221795);
  z-index:0
}

.gallery-item>span {
  position:absolute;
  bottom:18px;
  left:20px;
  right:20px;
  color:white;
  font-family:var(--serif);
  font-size:25px;
  line-height:1.1;
  z-index:1
}

.gallery-more {
  text-align:center;
  margin-top:36px
}

.gallery-more p {
  font-size:12px;
  margin:17px auto 0;
  color:var(--muted)
}

.places-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px
}

.place-card>.image-link>img {
  height:295px;
  object-position:center
}

.place-card>div {
  padding-top:23px
}

.place-card .eyebrow {
  font-size:12px;
  margin-bottom:10px
}

.place-card p {
  font-size:14px;
  margin-top:12px;
  color:var(--muted)
}

.location-section {
  background:#eceee6;
  padding-block:74px
}

.location-grid {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  align-items:center;
  gap:11%
}

.location-grid h2 {
  font-size:clamp(40px,4vw,59px)
}

.location-grid p:not(.eyebrow) {
  font-size:15px;
  margin-top:23px;
  color:var(--muted)
}

.location-grid .road-note {
  font-size:12px!important;
  border-left:2px solid #9ca78b;
  padding-left:16px;
  margin-bottom:28px;
  max-width:440px
}

.location-photo {
  position:relative
}

.location-photo>.image-link>img {
  height:380px
}

.location-label {
  position:absolute;
  bottom:20px;
  left:20px;
  right:20px;
  display:flex;
  align-items:center;
  gap:14px;
  background:#fbfaf7ec;
  backdrop-filter:blur(6px);
  padding:16px 18px;
  font-family:var(--serif);
  font-size:25px;
  line-height:1.1
}

.location-label svg {
  width:28px;
  height:28px;
  stroke:var(--green);
  stroke-width:1.25
}

.location-label small {
  font:12px/1.5 var(--sans);
  display:block;
  margin-top:5px;
  letter-spacing:.04em
}

.booking-section {
  background:var(--green-deep);
  color:#f9faef;
  position:relative;
  overflow:hidden;
  padding-block:100px 112px
}

.booking-inner {
  position:relative;
  z-index:1;
  text-align:center
}

.booking-inner .eyebrow {
  color:#bac5a7
}

.booking-inner h2 {
  font-size:clamp(52px,5.9vw,87px)
}

.booking-inner>p:not(.eyebrow) {
  margin:25px auto 0;
  color:#c3ccbd;
  font-size:14px;
  line-height:1.8
}

.booking-actions {
  display:flex;
  justify-content:center;
  gap:15px;
  margin-top:34px;
  flex-wrap:wrap
}

.booking-alternative {
  font-size:12px;
  color:#c3ccbd;
  text-decoration:underline;
  text-underline-offset:5px;
  display:inline-block;
  margin-top:24px
}

.booking-watermark {
  position:absolute;
  bottom:-.32em;
  right:-.015em;
  font:400 clamp(190px,30vw,490px)/1 var(--serif);
  letter-spacing:-.06em;
  color:#ffffff04;
  pointer-events:none
}

.footer {
  padding-block:52px 24px
}

.footer-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:36px;
  padding-bottom:40px
}

.footer-brand>span {
  font-size:34px
}

.footer-brand small {
  font-size:12px
}

.footer-links {
  display:flex;
  gap:30px;
  font-size:12px
}

.footer-links a:hover {
  text-decoration:underline;
  text-underline-offset:5px
}

.footer-location {
  font-size:12px;
  color:var(--muted);
  text-align:right
}

.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid var(--line);
  padding-top:24px;
  font-size:12px;
  color:var(--muted)
}

.footer-bottom .text-button {
  font-size:12px;
  text-decoration:none
}

.footer-utility {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px
}

.footer-credit {
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:var(--muted);
  border:1px solid var(--line);
  border-radius:999px;
  padding:4px 8px;
  font-size:9px;
  font-weight:500;
  letter-spacing:.025em;
  opacity:.72;
  white-space:nowrap
}

.footer-credit a {
  color:inherit;
  text-decoration:none
}

.footer-credit a:hover,.footer-credit a:focus-visible {
  color:var(--green);
  text-decoration:underline;
  text-underline-offset:3px
}

dialog {
  border:0;
  padding:0
}

dialog::backdrop {
  background:#09120ff0;
  backdrop-filter:blur(8px)
}

.dialog-close {
  position:absolute;
  right:18px;
  top:12px;
  width:48px;
  height:48px;
  color:inherit;
  font:300 38px/1 var(--sans);
  z-index:3
}

.lightbox {
  background:transparent;
  color:white;
  max-width:none;
  width:100%;
  height:100%;
  max-height:none;
  margin:0
}

.lightbox[open] {
  display:flex;
  align-items:center;
  justify-content:center
}

.lightbox figure {
  max-width:calc(100% - 160px);
  margin:50px auto 32px;
  position:relative
}

.lightbox figure>img {
  height:auto;
  max-height:calc(100svh - 155px);
  width:auto;
  max-width:100%;
  object-fit:contain;
  margin:auto
}

.lightbox figcaption {
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin:16px auto 0;
  font-size:14px;
  width:100%;
  min-width:min(60vw,400px)
}

.lightbox figcaption>span:last-child {
  color:#adb7a5;
  font-size:12px;
  white-space:nowrap
}

.lightbox-prev,.lightbox-next {
  position:absolute;
  top:calc(50% - 24px);
  color:white;
  font:400 42px/1 var(--serif);
  width:48px;
  height:48px;
  border:1px solid #ffffff45;
  border-radius:50%;
  z-index:2
}

.lightbox-prev {
  left:22px
}

.lightbox-next {
  right:22px
}

.image-error {
  position:absolute;
  bottom:80px;
  left:20%;
  right:20%;
  text-align:center;
  color:white
}

.video-dialog {
  background:#1a281f;
  color:white;
  width:min(1100px,95vw);
  max-width:95vw;
  max-height:95svh;
  overflow:auto
}

.video-dialog-header {
  padding:24px 28px;
  position:relative
}

.video-dialog-header h2 {
  font-size:31px;
  padding-right:40px
}

.video-dialog-header .eyebrow {
  font-size:12px;
  margin-bottom:7px
}

#video-container {
  width:100%;
  aspect-ratio:16/9;
  background:#090e0b;
  display:grid;
  place-items:center
}

#video-container>video,#video-container>iframe {
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:16/9;
  border:0
}

.video-note {
  padding:15px 28px;
  font-size:12px;
  color:#bfc9b7;
  max-width:none
}

.video-note a {
  text-decoration:underline;
  text-underline-offset:3px
}

.privacy-dialog {
  background:var(--paper);
  color:var(--ink);
  padding:50px;
  width:650px;
  max-width:calc(100vw - 32px);
  max-height:90svh;
  overflow:auto
}

.privacy-dialog h2 {
  font-size:46px;
  margin-bottom:24px
}

.privacy-dialog p:not(.eyebrow) {
  font-size:14px;
  color:var(--muted);
  margin-top:17px
}

.noscript-note {
  padding:24px;
  background:var(--cream);
  font-size:14px;
  max-width:none
}

.noscript-note a {
  text-decoration:underline
}

html:not(.js) .film-button,html:not(.js) .large-play,html:not(.js) [data-video],html:not(.js) .season-tabs,html:not(.js) .gallery-toolbar,html:not(.js) #privacy-open {
  display:none
}













.image-link {
  display:block;
  overflow:hidden;
  position:relative
}

.image-link img {
  transition:transform .6s
}

.image-link:hover img {
  transform:scale(1.025)
}




.film-choices-wrap {
  background: var(--green-deep);
  color: white;
  padding-block: 35px;
}
.film-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.film-choice {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  padding: 0;
  text-align: left;
  color: inherit;
}
.film-choice-image {
  display: block;
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
}
.film-choice-image img {
  aspect-ratio: 16 / 9;
  transition: transform .3s;
}
.film-choice-image .play-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #13231870;
}
.film-choice:hover img {
  transform: scale(1.04);
}
.film-choice-caption strong {
  display: block;
  font: 400 28px/1.1 var(--serif);
}
.film-choice-caption > span {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: #c6d0bc;
}
.film-choice-caption small {
  font-size: 12px;
  border-left: 1px solid #77896d;
  margin-left: 12px;
  padding-left: 12px;
}