@import '../../../styles/variables';
@import '../../../styles/mixins';

.dc-doc-leading-page {
    display: flex;
    max-width: 1440px;

    @include text-size(body-2);

    &_regular-page-width {
        max-width: 1280px;
    }

    &__main {
        margin-bottom: 40px;
        padding: 0 40px;
    }

    &__title {
        margin: 40px 0 $normalOffset;

        @include text-size(display-2);
    }

    &__description {
        a {
            @include link();

            &:not([href]) {
                color: inherit;
            }
        }
    }

    &__links {
        @include reset-list-style();

        display: flex;
        justify-content: space-between;
        flex-flow: column wrap;

        &_root {
            flex-direction: row;
            margin-top: 70px;
            margin-bottom: -$blockMarginBottomLarge;
        }
    }

    &__links-left {
        padding-right: 10px;
    }

    &__links-item {
        &_root {
            display: flex;
            min-width: 280px;
            max-width: 400px;
            width: calc(50% - 20px);
            padding-bottom: 40px;
            margin-bottom: $blockMarginBottomLarge;
            border-bottom: 1px solid var(--yc-color-line-generic);
        }
    }

    &__links-title {
        &_root {
            @include heading4();

            margin-bottom: 10px;
            font-weight: 500;
        }
    }

    &__links-link {
        @include link();
    }

    @media (max-width: map-get($screenBreakpoints, 'md') - 1) {
        &__main {
            margin-left: 0;
            margin-bottom: 40px;
            padding: 0 20px;
        }

        &__links-item {
            width: 100%;
        }
    }
}