.menu-sections {
    max-width: 1120px;
    margin: 0 auto;
    margin-top: -49px;
    z-index: 6;
    position: relative;
}

.menu-sections-wrapper {
    padding:  0 20px;
}

.menu-sections .top {
    background-color: #525252;
    color: #F4F4F4;
    font-size: 16px;
    font-style: normal;
    line-height: 29px; /* 180% */
    text-transform: uppercase;
}

.menu-sections .top .title {
    padding: 10px 20px;
}

.menu-sections .top .all-products {
    display: none;
}

.signpost {
    border: 1px solid #525252;
    border-top: none;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.signpost .section a {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.section-name {
    color:  #262626;
    font-size: 16px;
    font-style: normal;
    line-height: 28.8px; /* 180% */
    text-transform: uppercase;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 5px;
}

.section-icon {
    width: 40px;
    height: 40px;
}

.section-image {
    overflow: hidden;
}

.section-image img {
    width: 100px;
    height: 60px;
    object-fit: cover;
    transition: transform 0.5s;
}

.signpost .section a:hover .section-image img {
    transform: scale(1.1);
}

.signpost .section a .section-icon svg {
    fill: var(--color-gray-40);
    transition: fill 0.5s;
}

.signpost .section a:hover .section-icon svg {
    fill: var(--color-gray-90);
}

.section-kontakt a {
    background-color: #f4f4f4;
    transition: background-color 0.5s;
    position: relative;
}

.section-kontakt a:hover {
    background-color: #EAEAEA;
}

.section-kontakt a .icon svg {
   position: absolute;
   fill: #A8A8A8;
   right: 7px;
   bottom: 7px;
   transition: fill 0.5s;
}

.section-kontakt a:hover .icon svg {
   fill: #6F6F6F;
}

.signpost .section-kontakt a {
    flex-direction: column;
    gap: 0px;
    align-items: flex-start;
        padding: 8px 15px;
}

.signpost .section-kontakt p {
    color: #262626;
    font-size: 14px;
    font-style: normal;
    line-height: 23.1px; /* 165% */
}

.signpost .section-kontakt p.kontakt {
    color: #262626;
    font-size: 16px;
    font-style: normal;
    line-height: 23.1px;
    font-weight: 500;
    margin-top: -2px;
}

@media screen and (min-width: 480px) {
    .menu-sections {
        max-width: 1006px;
    }

    .section-image img {
        width: 160px;
        height: 80px;
    }

    .menu-sections-wrapper {
        padding:  0 45px;
    }
}

@media screen and (min-width: 768px) {
    .menu-sections .top .title {
        padding: 10px 20px;
    }

    .menu-sections {
        margin-top: -55px;
    }

    .signpost {
        padding: 30px;
        gap: 20px;
    }

    .menu-sections .top .title {
        padding: 13px 30px;
    }

    .signpost .section-kontakt a {
        padding: 16px 20px;
        height: 100%;
    }

    .section-icon {
        width: 60px;
        height: 60px;
    }
}

@media screen and (min-width: 800px) {
    .signpost {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .section {
        /* fit two cards next to each other in flex*/
        flex: 1 1 calc(50% - 10px);
    }

    .menu-sections .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        
    }

    .menu-sections .top .all-products {
        padding: 0 30px;
        display: block;
        border-left: 1px solid #C6C6C6;
        height: 55px;
        display: flex;
        align-items: center;
        flex-direction: row;
        color: #C6C6C6;
    }

    .menu-sections .top .all-products .icon svg {
        fill: #C6C6C6;
        transition: fill 0.5s;
    }

    .menu-sections .top .all-products a {
        display: flex;
        align-items: center;
        gap: 15px;
        transition: color 0.5s;
    }

    .menu-sections .top .all-products a:hover {
        color: #F4F4F4;
    }

    .menu-sections .top .all-products a:hover .icon svg {
        fill: #F4F4F4;
    }

}

@media screen and (min-width: 1350px) {
    .menu-sections {
        max-width: 1172px;
    }

     .section {
        /* fit three cards next to each other in flex*/
        flex: 1 1 calc(33.33% - 15px);
    }

    .signpost .section a {
        flex-direction: column;
        align-items: flex-start;
    }  

    .section-image img {
        width: 100%;
        height: 180px;
    }

    .signpost .section-kontakt a {
        padding: 16px 20px;
        margin-top: 70px;
        height: calc(100% - 70px);
    }

    .signpost {
        padding-top: 20px;
    }

}