.main:has(.side-menu) {
    padding: 0;
}

.side-menu {
    & ul:not(:first-child) {
        margin-top: 32px;
    }
}

*:has(> .side-menu) > * {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    
    &:first-child {
        padding-top: var(--well);
    }
    &:last-child {
        padding-bottom: var(--well);
    }
}

@media (min-width: 1024px) {

    *:has(>.side-menu) {
        display: grid;
        grid-template-columns: 31.9Fr 68.1Fr;
        grid-template-rows: auto;
        position: relative;

        &::before{
            content:"";
            display:block;
            position:absolute;
            top:0;
            left:31.9%;
            width:1px;
            height:100%;
            border-left: 1px solid var(--color-font-black);
         }
    }

    .side-menu {
        padding: var(--well) 40px var(--well) var(--gutter);
        
        grid-column: 1;
        grid-row: 1 / 99;
        position: sticky;
        align-self: start;
        top: 0;
        
        & .title {
            font-size: 2.4rem;
            font-weight: 600;
            color: var(--color-font-black);
        }
    }
    
    *:has(> .side-menu) > *:not(.side-menu) {
        grid-column: 2;
        &:nth-child(1) {grid-row: 1;}
        &:nth-child(2) {grid-row: 2;}
        &:nth-child(3) {grid-row: 3;}
        &:nth-child(4) {grid-row: 4;}
        &:nth-child(5) {grid-row: 5;}
        &:nth-child(6) {grid-row: 6;}
        &:nth-child(7) {grid-row: 7;}
        &:nth-child(8) {grid-row: 8;}
        &:nth-child(9) {grid-row: 9;}

        padding-left: var(--gutter);
        padding-right: 40px;
	}

    :nth-child(1 of *:has(> .side-menu) > *:not(.side-menu)) {
        padding-top: var(--well);
    }
    :nth-last-child(1 of *:has(> .side-menu) > *:not(.side-menu)) {
        padding-bottom: var(--well);
    }
}