/*
 * This file is part of the UX SDC Bundle
 *
 * (c) Jozef Môstka <https://github.com/tito10047/ux-sdc>
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */

/* Styles for Sections component */
@layer components {
    .sections {
        position: relative;
        padding-block: var(--space-2xl) var(--space-xl);
        background: var(--color-surface, #000000);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);

        & .sections__inner {
        }

        & .sections__item {
            padding-block: var(--space-l);
        }

        & .sections__title {
            font-size: var(--size-step-3);
            color: var(--color-white, #EDEDED);
            font-weight: 600;
            margin-bottom: var(--space-m);
        }

        & .sections__content {
            font-size: var(--size-step-1);
            color: var(--color-gray-300, #888888);
            line-height: 1.6;
            max-width: 75ch;

            & p {
                margin-bottom: var(--space-m);
            }
            
            & strong {
                color: var(--color-white, #EDEDED);
            }
            
            & ul, & ol {
                margin-bottom: var(--space-m);
                padding-left: var(--space-l);
            }
            
            & li {
                margin-bottom: var(--space-xs);
            }
        }
    }
}