Using :checked pseudo selector multiple times for "checkbox hack"

I am trying to use "Checkbox hack" to move and change multiple items in page's header. Only one item (div section with paragraph, links, svgs) is changed by css pseudo class :checked when input is trigerred. The logo svg, doesn't rotate after :checked .

````CSS
.menu-logo-closed{
position: absolute;
width: 29.03px;
height: 31.24px;
top: 28.45px;
right: 8%;
display: block;
transform: rotate(-183deg);
z-index: 2;
cursor: pointer;}

.section{
opacity:0;
pointer-events: none;
position: absolute;}

.section__checkbox:checked ~ .menu-logo-closed{
transform: rotate(-2.33deg);} /*:checked does nothing here */

.section__checkbox:checked ~ .section{
opacity: 1;
pointer-events: all; /*this section works*/
position: relative;} 

````HTML
<input id="header" class="section__checkbox" type="checkbox" >
        <label for="header">
        <svg viewBox="0 0 33 35" fill="none" xmlns="http://www.w3.org/2000/svg"  alt="meniu" class="menu-logo-closed">
            <path d="M1.93321 15.5657L9.20397 32.8459C9.44027 33.3771 10.4306 33.3385 10.6249 32.7906L14.9413 19.6076C15.3642 18.2852 17.7754 18.1913 18.2999 19.4768L23.6732 32.3275C23.9095 32.8587 24.8998 32.8201 25.0941 32.2722L30.913 14.4823" stroke="white" stroke-miterlimit="10"/>
            <path d="M1.66081 8.57102L8.93161 25.8523C9.16786 26.3822 10.1582 26.3436 10.3525 25.797L14.6702 12.6465C15.0932 11.3272 17.5045 11.2334 18.0288 12.5157L23.4008 25.3338C23.6371 25.8637 24.6274 25.8251 24.8218 25.2785L30.6423 7.53231" stroke="white" stroke-miterlimit="10"/>
            <path d="M1.38844 1.57633L8.62131 17.8833C8.85639 18.3833 9.84672 18.3447 10.0422 17.828L14.388 5.39759C14.8138 4.15066 17.225 4.05676 17.7465 5.26681L23.0904 17.3623C23.3255 17.8623 24.3159 17.8237 24.5114 17.307L30.3698 0.532639" stroke="white" stroke-miterlimit="10"/>
            </svg></label>
        <div  class="section">
        <p class="p-first">Lorem ipsum
        </p>strong text