@layer components {
    .marketing-product-shot {
            background: var(--dashboard-color-surface);
            border: 1px solid var(--dashboard-color-border);
            border-radius: 0.75rem;
            box-shadow: 0 0.5rem 1rem -0.125rem rgb(15 23 42 / 0.04), 0 0.125rem 0.375rem -0.125rem rgb(15 23 42 / 0.03);
            margin: 0;
            min-width: 0;
            overflow: hidden;
            position: relative;
            width: 100%;
        }

    .marketing-product-shot__chrome {
            align-items: center;
            background: var(--dashboard-color-pill);
            border-bottom: 1px solid var(--dashboard-color-border);
            display: flex;
            gap: 0.5rem;
            padding: 0.75rem 1rem;
        }

    .marketing-product-shot__dot {
            border-radius: var(--dashboard-radius-pill);
            height: 0.75rem;
            width: 0.75rem;
        }

    /* conventional macos traffic light colors, no matching design tokens exist */
    .marketing-product-shot__dot--close {
            background: #ff5f57;
        }

    .marketing-product-shot__dot--minimize {
            background: #febc2e;
        }

    .marketing-product-shot__dot--zoom {
            background: #28c840;
        }

    .marketing-product-shot__image {
            display: block;
            height: auto;
            width: 100%;
        }

    .marketing-product-shot__demo {
            background: rgb(241 245 249 / 0.94);
            left: 50%;
            position: absolute;
            top: 50%;
            transform: translate(-50%, -50%);
            white-space: nowrap;
        }
}