:root {
    --header-height: 80px;
    --submenu-height: 50px;
    --menu-bg: #f7f7f7;
}
header {
    background-color: var(--menu-bg);
    position: relative;
    z-index: 99;
}
.header-wrapper {
    height: var(--header-height);
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas: "logo menu event-date languages";
    padding: 0 20px;
    max-width:1300px;
    margin:0 auto;
}



.nav-logo {
    margin-right: 40px;
    padding: 5px;
    position: relative;
    grid-area: logo;
    z-index: 100;
    display: block;
    height: var(--header-height);
    display:flex;

}
    .nav-logo img {
        height: 153%;
    }

.header .icon-mobile{
    display:flex;
    align-items:center;
    transition:0.3s;
       
}
.cls-3 {
    fill: #ed1c24;
    stroke: #ed1c24;
    stroke-miterlimit: 10;
    stroke-width: 1.2px;
}

.cls-1 {
    fill: #ea1d25;
}


.main-menu {
    grid-area: menu;
}
.event-date {
    margin-left: auto;
    width: 130px;
    font-weight: 700;
    grid-area: event-date;
    display:flex;
}
    .event-date svg{
        margin-top:auto;
        height:48px;
        width:100px;
    }
    .languages {
        grid-area: languages;
        display:flex;
        flex-direction:column;
        justify-content:center;
    }

@media screen and (max-width:1024px) {
    .header-wrapper {
        grid-template-columns: auto 1fr auto auto;
        grid-template-areas: "menu logo event-date languages";
        grid-gap:10px;
    }
    .nav-logo {
        margin-right: 0px;
    }
    .event-date {
        min-width: 80px;
        max-width:130px;
        width: calc(60px + 5vw);
    }
    .event-date svg{
        margin:auto;
    }
    .nav-logo img {
        height: 100%;
    }
}