@layer components {
    .about {
        padding-block: 6rem; /* py-24 */
        background-color: var(--clr-slate-950);
        border-top: var(--border-thin) solid var(--clr-slate-900);

        & .about__container {
            padding-inline: var(--space-md);
        }

        & .about__grid {
            display: grid;
            gap: 2rem; /* gap-8 */
            max-width: 72rem; /* max-w-6xl */
            margin-inline: auto;

            @media (min-width: 768px) {
                grid-template-columns: repeat(3, 1fr); /* md:grid-cols-3 */
            }
        }

        & .about__card {
            padding: 2rem; /* p-8 */
            background-color: color-mix(in srgb, var(--clr-slate-900), transparent 50%); /* bg-slate-900/50 */
            border: var(--border-thin) solid var(--clr-slate-800);
            border-radius: var(--radius-2xl); /* rounded-3xl approx */
            transition: all 0.3s ease;

            &:hover {
                border-color: color-mix(in srgb, var(--color-primary), transparent 70%); /* hover:border-primary-500/30 */
            }

            & .about__icon-wrapper {
                width: 3.5rem; /* w-14 */
                height: 3.5rem; /* h-14 */
                background-color: color-mix(in srgb, var(--color-primary), transparent 90%); /* bg-primary-500/10 */
                border-radius: var(--radius-xl); /* rounded-2xl approx */
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 1.5rem; /* mb-6 */
                color: var(--color-primary);
            }

            & .about__icon {
                width: 2rem; /* width="32" */
                height: 2rem; /* height="32" */
            }

            & .about__title {
                font-size: var(--text-xl);
                font-weight: 700;
                color: var(--color-white);
                margin-bottom: 0.75rem; /* mb-3 */
            }

            & .about__description {
                color: var(--clr-slate-400);
                font-size: var(--text-sm);
                line-height: 1.625; /* leading-relaxed */
            }
        }
    }
}