:root {
    --contentWidth: 90%;
}


/****************************************************
    Header  Area
****************************************************/


/****************************************************
    Component Area
****************************************************/

main > .wrapper {
    display: block;
}

#component, #left, #right {
    padding: 0 20px;
}

#component {
    order: 1;
}

#left {
    order: 2;
}

#right {
    order: 3;
}

#left, #right {
    float: none;
    width: unset;
}

#component:not(:last-child), #left:not(:last-child), #right:not(:last-child) {
    border-bottom: 1px solid #C0C0C0;
}

main > .wrapper > :last-child {
    margin-bottom: 80px;
}


/****************************************************
    Navigation
****************************************************/

.burger-menu, .sub-menu {
    display: inline-block;
    line-height: 55px;
    height: 60px;
    text-align: right;

    appearance: none;
}
.burger-menu::after {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 32px;
    content: '\f0c9';

    padding-right: 12px;
}
.burger-menu, .sub-menu {
    color: white;
}
.burger-menu:checked, .sub-menu:checked {
    color: black;
}

.sub-menu::after {
    padding-right: 12px;
    font-size: 20px;
}

.burger-menu + .nav {
    display: none;
}

.burger-menu:checked + .nav {
    display: grid;
    position: fixed;
    top: 62px;
    left: 0px;
    right: 0px;

    background-color: darkgray;

    grid-template-rows: auto;

    box-sizing: border-box;
    border: 1px solid gray;
}

.nav li {
    position: static;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto;
    padding: 0px;
    overflow: hidden;
}

#header .nav > li {
    margin: 0px;
    border-bottom: 1px solid gray;
}
#header .nav-child > li {
    border-bottom: 1px solid #404040;
}

.nav li.parent {
    grid-template-columns: auto 40px;
    grid-template-rows: auto auto;
}

#header .nav > li, .nav-child > li {
    text-decoration: none;
    box-sizing: border-box;

    margin: 0px;
    /*padding: 0px 20px;*/
    width: 100%;

    float: none;
    line-height: 55px;
}

.nav-child > li > a {
    line-height: 55px;
}

.nav > li > a::after {
    text-align: right;
    float: right;
}

#header .nav li:hover > a {
    border-bottom: none;
}
#header .nav li.active > a {
    text-decoration: underline;
    border-bottom: none;
}

#header .nav li.parent > a::after {
    display: none;
    content: '';
}

#header .nav li > .sub-menu:checked~ul {
    display: grid;
    grid-template-rows: auto;
}

.nav li > a {
    position: static;
    padding: 0px 20px;
}

.parent > .nav-child {
    display: none;
    position: static;
    width: unset;
    background-color: gray;
    list-style-type: none;
    padding-inline-start: 0px;
    border-top: 1px solid gray;

    visibility: visible;
    opacity: 1;
    
    padding: 0px;

    grid-column: 1 / 3;
}

.parent:hover > .nav-child {
    visibility: unset;
}


/****************************************************
    Content
****************************************************/

.blog-items.columns-2 {
    grid-template-columns: repeat(1, 1fr);
}

.blog-item {
    position: relative;
    display: block;
    clear: both;
    margin-bottom: 24px;
}

.blog-item img {
    display: block;
    float: unset;
}
.blog-item img + * {
    clear: both;
}

.item-image {
    display: block;
    margin: 0.5em;
    top: 0px;
}

.item-image.left, .item-image.right {
    float: unset;
}