.home-works-showcase { position: relative; height: 450px; margin-top: 30px; overflow: hidden; border-radius: 18px; background: #16181d; transition: box-shadow .2s ease; }
.home-works-showcase:hover { box-shadow: 0 20px 42px rgba(22,24,28,.18); }
.home-works-showcase.is-linked { cursor: pointer; }
.home-works-showcase.is-linked:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
[data-theme="dark"] .home-works-showcase:hover { box-shadow: 0 22px 46px rgba(0,0,0,.42); }
.home-works-showcase > img { width: 100%; height: 100%; display: block; object-fit: cover; transition: opacity .25s ease,transform .6s ease; }
.home-works-showcase::after { content: ""; position: absolute; inset: 0; background: rgba(8,10,13,.24); pointer-events: none; }
.home-work-copy { position: absolute; z-index: 1; inset: 0; display: grid; place-content: center; justify-items: center; padding: 28px 68px; color: #fff; text-align: center; transform: translateY(97px); pointer-events: none; }
.home-work-copy > span { font-size: 10px; font-weight: 800; }
.home-work-copy h2 { margin: 12px 0 7px; font-size: 34px; line-height: 1.25; font-weight: 800; text-shadow: 0 3px 20px rgba(0,0,0,.42); }
.home-work-copy p { margin: 0; color: rgba(255,255,255,.82); font-size: 11px; }
.home-work-controls { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 16px; display: flex; align-items: center; justify-content: flex-end; pointer-events: none; }
.home-work-dots { display: flex; align-items: center; gap: 7px; pointer-events: auto; }
.home-work-dots button { width: 7px; height: 7px; border: 0; border-radius: 50%; padding: 0; background: rgba(255,255,255,.5); cursor: pointer; }
.home-work-dots button.active { width: 20px; border-radius: 5px; background: #fff; }
.home-works-showcase.is-changing > img { opacity: .55; transform: scale(1.015); }
.home-works-showcase + .dashboard { padding-top: 28px; }
@media (max-width: 640px) { .home-works-showcase { height: 270px; margin-top: 14px; border-radius: 14px; } .home-work-copy { padding: 22px; transform: translateY(18px); } .home-work-copy h2 { font-size: 25px; } .home-work-controls { left: 12px; right: 12px; bottom: 11px; } .home-works-showcase + .dashboard { padding-top: 14px; } }