$pad: _size(pad);
$pad-small-tb: _size(pad-small-tb);
$pad-small-lr: _size(pad-small-lr);

@include breakpoint('<=small') {
    .panel {
        @include vendor('flex-direction', 'column');
        height: auto;
        width: 100vw !important;

        > * {
            @include panel-colors-small;
        }

        > .intro {
            width: 100vw !important;
            @include padding($pad-small-tb, $pad-small-lr);

            &.joined {
                padding-bottom: 0;
                padding-right: $pad-small-lr;

                & + .inner {
                    padding-top: 0;
                    padding-left: $pad-small-lr;
                }
            }
        }

        > .inner {
            width: 100vw !important;
            @include padding($pad-small-tb, $pad-small-lr);

            &.columns {
                @include vendor('flex-direction', 'column');

                > * {
                    margin-left: 0;
                    margin-top: 0;
                }

                > :first-child {
                    margin-top: 0;
                }

                &.divided {
                    > * {
                        margin-left: 0;
                        margin-top: ($pad-small-lr * 2);

                        &:before {
                            content: '';
                            position: absolute;
                            top: auto;
                            left: $pad-small-lr;
                            width: calc(100% - #{$pad-small-lr * 2});
                            height: 2px;
                            margin-left: 0;
                            margin-top: ($pad-small-lr * -1);
                        }
                    }

                    > :first-child {
                        margin-top: 0;
                    }
                }
            }
        }

        @include spans-small(_size(span-fixed));

        &.small,
        &.medium,
        &.large {
            @include spans-small(_size(span-variable));
        }

        @include panel-colors-small;
    }
}