.at-contentTabs {
    width: auto;
}

.at-contentTabs__inner {
    display: flex;
    flex-direction: column;
    border-radius: var(--borderRadius);
    box-shadow: var(--boxShadow);
    background: var(--baseLight100);
}

.pageBanner + .main .at-contentTabs:first-of-type { /* Only apply negative margin if it's the first article */
    margin-top: calc(-1 * 2 * var(--innerPaddingY));
}

/**
 * Tabs / Titles
 */

.at-contentTabs__tabs {
    position: relative;
    flex: 1 1 min(50%, 300px);
    padding: var(--innerPaddingX);
    border-radius: var(--borderRadius) var(--borderRadius) 0 0;
    color: #fff;
    background-color: var(--primaryColor500);
}

.at-contentTabs__tabs::after {
    content: '';
    width: 10px;
    height: 60px;
    position: absolute;
    bottom: -35px;
    left: calc(2 * var(--innerPaddingX));
    background: transparent url("bubble.svg") no-repeat center left;
    background-size: contain;
    transform: rotate(90deg);
}

.at-contentTabs__articleTitle {
    font-size: var(--h3Size);
    color: var(--baseLight100);
}

.at-contentTabs__tabs a {
    font-weight: 400;
    text-decoration: none;
    color: var(--baseLight100);
}

.at-contentTabs__title {
    position: relative;
    display: flex;
    gap: .5rem;
    padding: .5rem 0;
}

.at-contentTabs__title.--isActive {
    font-weight: 700;
}

/**
 * Content / Articles
 */

.at-contentTabs__content {
    flex: 1 1 75%;
    padding: var(--innerPaddingX);
}

.at-contentTabs__article {
    display: none;
}

.at-contentTabs__article.--isActive {
    display: block;
    scroll-padding-top: var(--innerPaddingX);
}

@media (min-width: 768px) {
    .at-contentTabs__inner {
        flex-direction: row;
    }

    .at-contentTabs__tabs {
        padding: var(--innerPaddingX) 0 var(--innerPaddingX) var(--innerPaddingX);
        border-radius: var(--borderRadius) 0 0 var(--borderRadius);
    }

    .at-contentTabs__tabs::after {
        display: none;
    }

    .at-contentTabs__title.--isActive::after {
        content: '';
        width: 10px;
        height: 60px;
        position: absolute;
        top: calc(50% - 30px);
        right: -10px;
        background: transparent url("bubble.svg") no-repeat center left;
        background-size: contain;
    }

    .at-contentTabs__content {
        padding: calc(1.5 * var(--innerPaddingX)) calc(2.5 * var(--innerPaddingX));
    }
}