IMPOSIBLE? sticky tabs with radio css

[jotagon]

I have this code, but i want to scroll and keep the tabs selection visible (make it sticky). The thing is when i add the sticky classes content dissapears. Also im not able to put all radio together. Label has to follow them. I dont know what to change, the thing is that i have tried ul li structures, that make link between tabs more difficult that adding label for… Im stick and i appreciate any help or idea.

<div class="layout">
    <div class="tabs">
        <!-- Tab 1 & Content -->
        <input type="radio" name="tab" id="tab1" role="tab" checked />
        <label for="tab1" class="menutabs" id="tab1-label">VISIÓN GENERAL</label>
        <section aria-labelledby="tab1-label">
          <!-- Tab 1 & Content -->
        </section>

        <!-- Tab 2 & Content -->
        <input type="radio" name="tab" id="tab2" role="tab" />
        <label for="tab2" class="menutabs"  id="tab2-label">LOCALIZACIÓN</label>
        <section aria-labelledby="tab2-label">
            <h2>Content of Tab 2</h2>
            <p>Hello World</p>
        </section>
        <!-- Tab 3 & Content -->
        <input type="radio" name="tab" id="tab3" role="tab" />
        <label for="tab3" class="menutabs"  id="tab3-label">ALOJAMIENTO</label>
        <section aria-labelledby="tab3-label">
            <h2>Content of Tab 3</h2>
            <p>Hello World</p>
        </section>
        <!-- Tab 4 & Content -->
        <input type="radio" name="tab" id="tab4" role="tab" />
        <label for="tab4" class="menutabs" >CURSOS SNOWBOARD/SKI</label>
        <section>
            <h2>Content of Tab 4</h2>
            <p>Hello World</p>
        </section>
        <!-- Tab 5 & Content -->
        <input type="radio" name="tab" id="tab5" role="tab" />
        <label for="tab5" class="menutabs" >¿QUÉ INCLUYE?</label>
        <section>
            <h2>Content of Tab 5</h2>
            <p>Hello World</p>
        </section>
        <!-- Tab 6 & Content -->
        <input type="radio" name="tab" id="tab6" role="tab" />
        <label for="tab6" class="menutabs" >COVID-19</label>
        <section>
            <h2>Content of Tab 6</h2>
            <p>Hello World</p>
        </section>
        <!-- Tab 7 & Content -->
        <input type="radio" onclick="window.location='/tienda';" name="tab" id="tab7" role="tab"  />
        <label for="tab7" class="menutabs" >Reservar</label>
       
    </div>
</div>
<style>
.tabs p {
    font-size: 2rem;
    line-height: 2rem;
    padding: 0 3rem;
    margin-bottom: 2rem;
}



.menutabs:last-child {
    border: 1px solid;}

.menutabs:last-child:hover {
    color: white;
    background: #ff0000;
}
.menutabs:hover {
    border: 1px solid;
}
.menutabs label{
            transition:all 0.3s ease;

}
    /* For debug only */
    .tabs {
        display: flex;
        flex-wrap: wrap;
            max-width: 98%;
    }
    .tabs > section {
        order: 999;
        width: 100%;
        display: none;
    }
    .tabs > input {
        opacity: 0;
        position: absolute;
    }
    .tabs > input[type="radio"]:checked + label {
        /*Highlight*/
        background-color: #ff0000;
        color: white !important;
    }
    .tabs > input[type="radio"]:checked + label + section {
        display: unset;
    }

    .tabs > label {
        padding: 0.5em 1em;
        color: #ff0000;
            width: 14%;
text-align: center;
            transition:all 0.3s ease;
            font-size: 0.9rem;

    }
    .tabs > label:last-of-type {
      /*  border-right: none;*/
    }
    .tabs > input[type="radio"]:checked + label {
        color: #ff0000;
    }
    .tabs section {
        padding: 4em;
    }