@include namespace('site') {
    @include store((
        --dims: (
            --outer-pad-x: 6rem,
            --inner-pad-x: 2rem,
            --pad-y: 6rem,
        )
    ));

    @include layout(namespace()) {
        display:         flex;
        flex-direction:  row;
        justify-content: space-around;

        @include element('col') {
            box-sizing: border-box;
            flex:       0 0 auto;
            width:      100%;
            min-width:  0;
            max-width:  35rem;
            height:     100%;
            padding:    prop(--dims --pad-y) prop(--dims --inner-pad-x) prop(--dims --pad-y) prop(--dims --outer-pad-x);

            @include next-twin-element {
                flex:          1 1 auto;
                max-width:     45rem;
                height:        auto;
                padding-right: prop(--dims --outer-pad-x);
                padding-left:  prop(--dims --inner-pad-x);
            }
        }

        @include media('<=sm') {
            display: block;

            @include element('col') {
                width:  auto;
                height: auto;

                @include next-twin-element {
                    width: auto;
                }
            }
        }
    }
}