.op3-element[data-op3-element-type^="megamenudropdown"] {
    position: absolute;
    display: none;
    top: 100%;
    left: 0;
    //width: 100%;
    z-index: 250;

    // Width is relative to parent, so 100% is no good. Let's use 100vw minus
    // the scrollbar. Scrollbars are not visible on mobile browsers, but this
    // is just a default value, user is going to change it...
    width: calc(100vw - 15px);

    &.jquery-megamenu__dropdown--active {
        display: grid;

        > .op3-element-megamenudropdown__container::before {
            content: "";
            position: absolute;
            display: block;
            bottom: 100%;
            left: 0;
            width: 100%;
            height: 0;
        }
    }

    .op3-element-megamenudropdown__container {
        min-height: 64px;
        overflow: visible;
    }

    .op3-element-megamenudropdown__background--base::before,
    .op3-element-megamenudropdown__background--base::after {
        background: #fff;
    }

    .op3-element-megamenudropdown__children {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        gap: 0.5em 1em;
    }

    .op3-element[data-op3-element-type="row"] {
        > [data-op3-element-container] > [data-op3-children] {
            row-gap: 3em;
        }
    }

    .op3-element[data-op3-element-type="bulletblock"] {
        .op3-element-bulletblock__container {
            padding: 0;
        }
    }
}