.show-off {
    --so-aspect: 16 / 9;
    --so-min-height: 0px;
    --so-margin-top: 0px;
    --so-margin-bottom: 0px;
    --so-parallax-image-height: 118%;
    --so-parallax-image-inset: -9%;
    --so-panel-width: 900px;
    --so-panel-bg: rgba(255, 255, 255, .9);
    --so-panel-padding: 35px;
    --so-radius-tl: 8px;
    --so-radius-tr: 8px;
    --so-radius-br: 8px;
    --so-radius-bl: 8px;
    display: block;
    margin-bottom: var(--so-margin-bottom);
    margin-top: var(--so-margin-top);
    position: relative;
    width: 100%;
}

.show-off *,
.show-off *::before,
.show-off *::after {
    box-sizing: border-box;
}

.show-off__stage {
    align-items: end;
    aspect-ratio: var(--so-aspect);
    background: #1d1d24;
    display: grid;
    isolation: isolate;
    min-height: var(--so-min-height);
    overflow: hidden;
    position: relative;
    width: 100%;
}

.show-off__hero {
    display: block;
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    transform: translate3d(0, 0, 0) scale(1.001);
    transform-origin: center;
    width: 100%;
    z-index: -2;
}

.show-off--parallax .show-off__hero {
    height: var(--so-parallax-image-height);
    inset: var(--so-parallax-image-inset) 0 auto;
    transform: translate3d(0, var(--so-parallax-y, 0px), 0) scale(1.001);
    will-change: transform;
}

.show-off__depth {
    box-shadow:
        inset 0 42px 48px -34px rgb(0 0 0 / 78%),
        inset 0 -52px 58px -38px rgb(0 0 0 / 82%);
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: -1;
}

.show-off__content {
    align-items: center;
    align-self: end;
    display: flex;
    flex-direction: column;
    grid-area: 1 / 1;
    padding: clamp(30px, 5vw, 80px) 20px 50px;
    position: relative;
    width: 100%;
    z-index: 1;
}

.show-off__badge {
    display: block;
    filter: drop-shadow(0 8px 12px rgb(0 0 0 / 45%));
    height: auto;
    margin: 0 auto 18px;
    max-height: clamp(180px, 18vw, 330px);
    max-width: 120px;
    object-fit: contain;
    width: auto;
}

.show-off__panel {
    background: var(--so-panel-bg);
    border-radius: var(--so-radius-tl) var(--so-radius-tr) var(--so-radius-br) var(--so-radius-bl);
    max-width: 100%;
    padding: var(--so-panel-padding);
    width: min(100%, var(--so-panel-width));
}

.show-off__panel > :first-child { margin-top: 0; }
.show-off__panel > :last-child { margin-bottom: 0; }

.show-off--no-image .show-off__stage {
    background: linear-gradient(135deg, #5d433c, #856259);
}

@media (max-width: 760px) {
    .show-off__content {
        padding-left: 16px;
        padding-right: 16px;
    }

    .show-off__panel {
        padding: min(var(--so-panel-padding), 30px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .show-off--parallax .show-off__hero {
        height: 100%;
        inset: 0;
        transform: none !important;
        will-change: auto;
    }
}