.banner--top {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding-left: $space-xl;
    padding-right: $space-xl;

    @media (max-width: $media-breakpoint-mobile) {
        padding-left: $space-m;
        padding-right: $space-m;
    }
}

.banner--bottom {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding-left: $space-xl;
    padding-right: $space-xl;
    margin-top: 40px;

    @media (max-width: $media-breakpoint-mobile) {
        padding-left: $space-m;
        padding-right: $space-m;
    }

    &__content {
        width: calc(100% - #{$left-aside-width} - #{$column-spacing});
        margin-left: calc(#{$left-aside-width} + #{$column-spacing});

        @media (max-width: $media-breakpoint-desktop) {
            width: calc(
                100% - #{$left-aside-width-desktop} - #{$column-spacing}
            );
            margin-left: calc(
                #{$left-aside-width-desktop} + #{$column-spacing}
            );
        }

        @media (max-width: $media-breakpoint-tablet) {
            width: 100%;
            margin-left: 0;
        }
    }
}
