.sidebar-and-content{
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.sidebar-and-content-side{
    background: var(--color-light-blue);
    margin-bottom: var(--row-gap);
}

.sidebar-and-content-side-inner{
    max-width: var(--wide-width);
    margin: 0 auto;
    padding: var(--row-gap) 0;
}

.sidebar-and-content-side-title{
    display: flex;
    align-items: center;
    position: relative;
}

.sidebar-and-content-side-title h2{
    font: var(--font-headline-3);
    margin-bottom: 0;
    flex-grow: 1;
}

.sidebar-and-content-side-toggle{
    display: block;
    flex-shrink: 0;
    width: 4.8rem;
    height: 4.8rem;
    color: var(--hover-link-color);
    margin-left: auto;
}

.sidebar-and-content-side-toggle:is(:hover, :focus, :active){
    color: var(--link-color);
    outline: none;
}

.sidebar-and-content-side-toggle::before{
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: 1.2rem;
    border-right: 0.2rem solid;
    border-bottom: 0.2rem solid;
    width: 1em;
    height: 1em;
    transform: translateY(-75%) rotateZ(45deg);
    transition: all 0.3s ease;
}

.sidebar-and-content-side-inner.open .sidebar-and-content-side-toggle::before{
    transform: translateY(-25%) rotateZ(-135deg);
}

.sidebar-and-content-side-content{
    padding: 0;
    max-height: 0;
    transition: all 0.3s ease-out;
    overflow: hidden;
}

.sidebar-and-content-side-inner.open .sidebar-and-content-side-content{
    padding: var(--item-row-gap) 0;
    max-height: 1000rem;
    transition: all 0.3s ease-in;
}

.sidebar-and-content-side-content-group{
    margin-top: 2.4rem;
}

.sidebar-and-content-side-content-group :is(h1, h2, h3, h4, h5, h6){
    font: var(--font-headline-6);
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 2.4rem;
}

.sidebar-and-content-side-content-group[data-content-type="menu"] nav ul{
    display: flex;
    flex-direction: column;
    row-gap: 2.4rem;
    margin: 0;
    padding: 0;
}

.sidebar-and-content-side-content-group[data-content-type="menu"] nav ul li{
    display: block;
    list-style: none;
}

.sidebar-and-content-side-content-group[data-content-type="menu"] nav ul li a{
    color: var(--hover-link-color);
    display: inline-block;
    text-decoration: none;
}

.sidebar-and-content-side-content-group[data-content-type="menu"] nav ul li a::after{
    content: '';
    display: inline-block;
    width: 0.4em;
    height: 0.4em;
    border-bottom: 0.1rem solid;
    border-right: 0.1rem solid;
    transform: translateY(-0.1em) rotate(-45deg);
    margin-left: 0.2em;
}

.sidebar-and-content-side-content-group[data-content-type="menu"] nav ul li a:is(:hover, :focus, :active){
    color: var(--link-color);
    text-decoration: none;
}

.sidebar-and-content-side-content-group[data-content-type="content"]:not(:first-child){
    border-top: 0.1rem solid;
    padding-top: calc(var(--item-row-gap) / 2);
}

.sidebar-and-content-side-content-group[data-content-type="content"][data-font-size="small"]{
    font: var(--font-body-xsmall);
}

.sidebar-and-content-side-content-group[data-content-type="content"][data-font-size="regular"]{
    font: var(--font-body-small);
}

.sidebar-and-content-side-content-group[data-content-type="content"][data-font-size="large"]{
    font: var(--font-body);
}

.sidebar-and-content-main > .blocks-container > *:first-child{
    margin-top: 0;
}

.page-hero:not(:has(.page-hero-description)) + .sidebar-and-content .sidebar-and-content-main > .blocks-container > *:first-child{
    margin-top: var(--block-margin);
}

.sidebar-and-content-main > .blocks-container > *:last-child{
    margin-bottom: var(--block-margin);
}

@media (min-width: 992px){
    .sidebar-and-content{
        --left-column-width: calc( (var(--wide-width) * 0.3) + ((100% - var(--wide-width)) / 2));
        --left-column-inner-width: calc( (var(--wide-width) * 0.3) - calc(var(--column-gap) / 2));
        --right-column-width: calc( (var(--wide-width) * 0.7) + ((100% - var(--wide-width)) / 2));
        --right-column-inner-width: calc( (var(--wide-width) * 0.7) - calc(var(--column-gap) / 2));

        grid-template-columns: var(--left-column-width) var(--right-column-width);
        margin-top: var(--block-margin);
    }

    .page-hero:not(:has(.page-hero-description)) + .sidebar-and-content{
        margin-top: 0;
    }

    .sidebar-and-content-side{
        margin-bottom: 0;
    }

    .sidebar-and-content-side-inner{
        max-width: var(--left-column-inner-width);
        margin: 0 calc(var(--column-gap) / 2) 0 auto;
    }

    .sidebar-and-content-side-title{
        padding-bottom: 2.4rem;
        border-bottom: 0.1rem solid;
    }

    .sidebar-and-content-side-toggle{
        display: none;
    }
    
    .sidebar-and-content-side-content{
        max-height: unset;
        padding: 0;
    }

    .sidebar-and-content-main{
        --wide-width: 100%;
        --full-width: 100%;

        width: 100%;
        max-width: var(--right-column-inner-width);
        margin: 0 auto 0 calc(var(--column-gap) / 2);
    }

    :where(.sidebar-and-content-main) > .blocks-container > *{
        max-width: 100%;
    }
}