/* With Side
.side        { grid-area: side;    display: none; }
*/

.checkboxes_and_radio_buttons {
    margin: 0 auto;

    float: right;
    
    height: 70%;
    position: relative;
    top: 50%;
    left: 0;
    transform: translate(0%, -50%);
}

@media screen and (min-device-width: 1024px) {
    /*@media screen and (min-resolution: 1dppx) {*/
    @media (min-width: 800px) {
        /*.checkboxes_and_radio_buttons {
           background-color: #aaa;
           }*/

        .big_screen { display: block; }
        .small_screen { display: none; }
    }

    /* With Side
    .side        { grid-area: side;    display: block; }
     */

    @media (max-aspect-ratio: 1/1) {
        .inner {
            /* With Side: grid-template-rows: var(--header-height) 1fr var(--side-height);*/
            grid-template-rows: var(--header-height) 1fr;
            grid-template-columns: 1fr;

            grid-template-areas:
                "header"
                "content";
                /* With Side "side"; */
        }
    }
    @media (min-aspect-ratio: 1/1) {
        .inner {
            grid-template-rows:    var(--header-height) 1fr;
            grid-template-columns: 1fr;
            /* With Side grid-template-columns: 1fr var(--side-width); */

            grid-template-areas:
                "header"
                "content";
            /* With Side
               "header  header"
               "content side"; */
        }
    }
}