.grid {
    width: 100%;
}

.sg-section {
    padding: 0 0 4rem;

    @include breakpoint(sm) {
        padding: 0 0 6rem;
    }

    @include breakpoint(xl) {
        padding: 0 3rem 6rem;
    }

    &__title {
        margin: 0 0 1.5rem;
        font-weight: bold;
        font-size: 2rem;
        font-family: var(--rocket-font-secondary);
        line-height: 1.25;
        letter-spacing: -0.02em;

        @include breakpoint(md) {
            font-size: 2.25rem;
            line-height: 1.22;
        }
    }

    &__row {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        column-gap: 1.5rem;
        row-gap: 1.5rem;

        & + & {
            margin-top: 1.5rem;
        }

        h2:not([class]),
        h3:not([class]) {
            margin-bottom: 1.5rem;
        }
    }

    h3 + .grid,
    .grid + h3 {
        margin-top: 1rem;
    }

    &:not(&--reset-grid) .grid {
        --rocket-ui-grid-row-gap: 2.5rem;
    }

    &--non-padding-sides {
        padding: 0 0 4rem;

        @include breakpoint(xl) {
            padding: 0 0 6rem;
        }

        > [class] {
            padding: 0;
        }
    }

    &--non-padding {
        padding: 0;

        @include breakpoint(md) {
            padding: 0;
        }

        @include breakpoint(lg) {
            padding: 0;
        }

        @include breakpoint(xl) {
            padding: 0;
        }

        > [class] {
            padding: 0;
        }
    }

    &--technical {
        h2[class] {
            font-size: 1.5rem;
            font-family: var(--rocket-font-secondary);
            line-height: 1.33;
        }
    }
}