.mgTabs { margin: 40px 0; }

.mgTabs > nav {
    border: 1px solid var(--blue);
}

.mgTabs > nav a {
    display: inline-block;
    padding: 10px 20px;
    color: var(--blue);
    text-decoration: none;
    cursor: pointer;
}

.mgTabs > nav a.current {
    background-color: var(--blue);
    color: var(--white);
}

.mgTabs .tabs > div {
    padding: 20px;
    border-left: 1px solid var(--blue);
    border-right: 1px solid var(--blue);
    border-bottom: 1px solid var(--blue);
}

.mgTabs .tabs > div:not(.current) { display: none; }
/* <-- */

/* Mobile */
@media (max-width: 799.999px) {
    .mgTabs { position: relative }

    .mgTabs > nav a.current { display: block; }

    .mgTabs > nav a:not(.current) { display: none; }

    .mgTabs > nav.show a:not(.current) {
        display: block;
        background-color: var(--white);
    }

    .mgTabs > nav.show a:hover {
        background-color: var(--blue);
        color: var(--white);
    }

    .mgTabs > nav.show div.arrow {
        display: none;
    }

    .mgTabs > nav {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background-color: var(--white);
        border-bottom: 1px solid var(--blue);
        z-index: 1;
    }

    .mgTabs > nav div.arrow {
        width: 8px;
        height: 8px;
        position: absolute;
        right: 18px;
        top: 12px;
        border-right: 2px solid var(--white);
        border-bottom: 2px solid var(--white);
        transform: rotate(45deg);
    }

    .mgTabs .tabs { padding-top: 40px; }
}

/* Tablet & Desktop */
@media (min-width: 800px) {
    .mgTabs {
        max-width: 980px;
        margin: 0 auto;
    }

    .mgTabs > nav {
        border-bottom: 1px solid var(--blue);
    }

    .mgTabs > nav a {
        transition: background-color .5s ease, color .5s ease;
        border-right: 1px solid var(--blue);
    }

    .mgTabs > nav a:hover {
        background-color: var(--blue);
        color: var(--white);
    }

    .mgTabs > nav div.arrow { display: none; }
}