@layer components {
    .features {
        padding-block: var(--space-3xl);
        background-color: var(--clr-slate-950);

        & .features__header {
            text-align: center;
            margin-bottom: var(--space-2xl);
        }

        & .features__title {
            font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl));
            font-weight: 700;
            color: var(--color-white);
            margin-bottom: var(--space-sm);
        }

        & .features__intro {
            color: var(--color-text-muted);
            font-size: var(--text-base);
            max-width: 40rem;
            margin-inline: auto;
        }

        & .features__selector {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: var(--space-xs);
            margin-bottom: var(--space-xl);
        }

        & .features__display {
            background-color: var(--clr-slate-900);
            border-radius: var(--radius-2xl);
            border: var(--border-thin) solid var(--clr-slate-800);
            overflow: hidden;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        }

        & .features__window-header {
            display: flex;
            align-items: center;
            gap: var(--space-md);
            padding: var(--space-xs) var(--space-md);
            background-color: var(--clr-slate-950);
            border-bottom: var(--border-thin) solid var(--clr-slate-800);
        }

        & .features__window-dots {
            display: flex;
            gap: 0.375rem;
        }

        & .features__window-dot {
            width: 0.75rem;
            height: 0.75rem;
            border-radius: var(--radius-full);
            border: var(--border-thin) solid transparent;

            &--red {
                background-color: color-mix(in srgb, #ef4444, transparent 80%);
                border-color: color-mix(in srgb, #ef4444, transparent 50%);
            }
            &--yellow {
                background-color: color-mix(in srgb, #f59e0b, transparent 80%);
                border-color: color-mix(in srgb, #f59e0b, transparent 50%);
            }
            &--green {
                background-color: color-mix(in srgb, #10b981, transparent 80%);
                border-color: color-mix(in srgb, #10b981, transparent 50%);
            }
        }

        & .features__window-title {
            font-family: monospace;
            font-size: var(--text-xs);
            color: var(--clr-slate-500);
            margin-left: var(--space-md);
        }

        & .features__previews {
            position: relative;
            min-height: 350px;
        }
    }
}