.main-navigation{background-color:var(--secondary-light-crest);z-index:10;width:100%;height:calc(100vh - 5rem);display:none;position:absolute;top:5rem;left:0;overflow:hidden;&[aria-expanded=true]{display:block}& .menu--main{gap:var(--size-m);padding:var(--size-xl)var(--size-m);& .menu__item{color:var(--core-dark-blue);font-size:var(--strong-sm);justify-content:space-between;align-items:center;padding-left:0;display:flex;& .icon{width:2rem;height:2rem}}& .menu__item__expand-sub{justify-content:space-between;width:100%;position:relative;&:before{content:"";width:100%;height:100%;position:absolute;top:0;left:0}}& .sub-wrapper{background-color:var(--secondary-light-crest);z-index:100;width:100%;height:100%;transition:left 1s ease-in-out;position:absolute;top:0;left:100%;&.open{left:0}}& ul.sub{padding-top:var(--size-l);padding-bottom:var(--size-l);margin:0;& a{text-decoration:none}}}& .menu__back-button{border-bottom:var(--border-component);color:var(--core-dark-blue);gap:var(--size-2xs);padding:var(--size-l)var(--size-m);justify-content:flex-start;width:100%;& .icon{order:-1;transform:rotate(180deg)}}}@media (width>=768px){.main-navigation{& .menu--main{padding-left:var(--size-l);padding-right:var(--size-l);flex-flow:wrap;& .menu__item:not(.with-sub){flex:calc(50% - 1.5rem)}& .menu__item__expand-sub{justify-content:flex-start;gap:var(--size-xs)}}}}@media (width>=1280px){.main-navigation{background-color:#0000;width:55%;height:100%;display:flex;position:static;overflow:visible;& .menu--main{&:not(.sub-1){justify-content:center;width:100%;padding:0;& .menu__item:not(.with-sub),&>li{flex:none}}& .sub-wrapper__decoration{background-color:var(--secondary-light-crest);width:16.6667%;height:7.8rem;display:none;position:absolute;top:8rem;left:0}& .sub-wrapper{border-left:var(--border-component);width:66.6667%;height:auto;display:none;top:100%;left:16.6667%;&.open{left:16.6667%}}& ul.sub{padding:var(--size-m);& li.menu__item:not(.with-sub){flex:0 28%}}}& .menu__item__expand-sub{cursor:unset;border-bottom:.3rem solid #0000;height:100%;&[aria-expanded=true],&:hover{border-color:var(--core-dark-blue);&+.sub-wrapper,&~.sub-wrapper__decoration{display:block}}}& .menu__back-button,& .menu__item__expand-sub .icon{display:none}}}