/* Let the card shadows dissipate into the page instead of clipping at the carousel. */
.kitas{padding-bottom:22px;background:radial-gradient(ellipse 76% 34% at 50% 66%,#082b240b 0%,transparent 100%),linear-gradient(180deg,var(--white) 0%,var(--paper) 82%,var(--paper) 100%)}
.kitas .cards{margin-inline:-65px;padding:7px 70px 125px;scroll-padding-inline:70px}
@media(max-width:650px){.kitas .cards{margin-inline:-42px;padding-inline:47px;padding-bottom:120px;scroll-padding-inline:47px}}

/* Hover: the patterned top of a Kita card fades into that Kita's photo. */
.kita-card .card-top{position:relative;isolation:isolate;overflow:hidden}
.kita-card .card-top>.type,.kita-card .card-top>h3{position:relative;z-index:2;transition:color .5s ease,text-shadow .5s ease}
.kita-card .card-photo{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .55s ease,transform .9s cubic-bezier(.2,.76,.2,1);pointer-events:none}
.kita-card .card-top::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,#082b2438 0%,#082b2499 100%);opacity:0;transition:opacity .55s ease;pointer-events:none}
.kita-card:hover .card-photo,.kita-card:focus-within .card-photo{opacity:1;transform:scale(1)}
.kita-card:hover .card-top::after,.kita-card:focus-within .card-top::after{opacity:1}
.kita-card:hover .card-top>h3,.kita-card:focus-within .card-top>h3{color:var(--white);text-shadow:0 2px 18px #082b2488}
.kita-card:hover .card-top>.type,.kita-card:focus-within .card-top>.type{color:var(--sun)}
@media(prefers-reduced-motion:reduce){.kita-card .card-photo,.kita-card .card-top::after,.kita-card .card-top>.type,.kita-card .card-top>h3{transition:none}.kita-card .card-photo{transform:none}}