.tab-view {
    display: flex;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    border-radius: .25rem;
    overflow: hidden;
}

.tab-view > .tab-overview {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

.tab-view > .tab-content {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
    background: var(--white);
}

.tab-view > .tab-overview, .tab-view > .tab-content {
    width: 100%;
    height: 100%;
}

.tab-view > .tab-content > .tab-pane {
    display: none;
    width: 100%;
    height: 100%;
}

.tab-view > .tab-content > .tab-pane.active {
    display: flex;
}

/* breakpoint-md: 768px */
@media all and (min-width: 769px) {
    .tab-view > .tab-overview {
        border-right: 1px solid rgba(0, 0, 0, 0.125);
    }

    .tab-view > .tab-content .tab-overview-toggle {
        display: none;
    }
}

/* breakpoint-md: 768px */
@media all and (max-width: 768px) {
    .tab-view > .tab-overview, .tab-view > .tab-content {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .tab-view > .tab-overview {
        transition: margin-left;
        transition-duration: 500ms;
    }

    .tab-view > .tab-overview.hidden {
        margin-left: -100% !important;
    }
}