@media (min-width: 1368px) {
  #header {
    & .menu_content_container {
      display: flex;
      align-items: center;
      gap: var(--gap-m);
    }
    & #mobile_menu_button {
      display: none;
    }
    & .menu_cta {
      display: flex;
      align-items: center;
    }
    & .main_menu {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: var(--gap-s);
      flex: 1;
      & li {
        position: relative;
        & a {
          padding: calc(var(--gap-s) / 2) 0;
          display: block;
          color: var(--color-white);
          &:hover {
            color: hsl(from var(--color-white) h s l / 0.7);
          }
        }
      }
      & > li {
        &.menu-item-has-children {
          display: flex;
          align-items: center;
          & > .expand_container {
            display: block;
            width: 20px;
            aspect-ratio: 1 / 1;
            color: var(--color-black);
            background-color: currentColor;
            mask: center / 10px 7px no-repeat
              url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' fill='none' viewBox='0 0 10 7'%3E%3Cpath fill='currentColor' d='m5 6.062-5-5L1.062 0 5 3.938 8.938 0 10 1.062z'/%3E%3C/svg%3E");
          }
          & > a {
            padding-right: var(--gap-xxs);
          }
          & ul {
            background: var(--color-white);
            position: absolute;
            list-style: none;
            top: calc(100% + var(--gap-xxs));
            left: 50%;
            transform: translateX(-50%);
            padding: 0;
            border-top: 2px solid var(--color-green);
            min-width: 288px;
            display: none;
            box-shadow: var(--box-shadow);
            & li {
              width: 100%;
              & a {
                padding: 20px var(--gap-s);
                display: block;
                width: 100%;
                font-weight: 400;
                border-bottom: 1px solid var(--color-grey);
                color: var(--color-black);

                &:hover {
                  color: var(--color-green);
                }
              }
              &:last-child {
                & a {
                  border-bottom: none;
                }
              }
            }
          }
          &.dt_active,
          &:hover {
            & ul {
              display: block;
            }
            &:before {
              content: "";
              display: block;
              position: absolute;
              border: var(--gap-xxs) solid rgba(0, 0, 0, 0);
              border-bottom-color: var(--color-green);
              width: 0;
              height: 0;
              top: calc(100% - var(--gap-xxs));
              left: 50%;
              transform: translateX(-50%);
            }
            &:after {
              display: block;
            }
          }
          &:after {
            content: "";
            display: none;
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            height: var(--gap-xs);
            width: 100%;
          }
        }
      }
    }
  }
}