:root {
    --space: 1.5625rem;
    --space-lg: calc(1.5625rem * 2);
}

.tabbed-content__wrapper {
    display: flex;
    position: relative;
}

.tabs-sidebar {
    display: flex;
    position: sticky;
    height: fit-content;
    top: var(--space);
    flex-direction: column;

    > * {
        padding: 0 var(--space);
        aspect-ratio: 18/9;
        display: flex;
        place-items: center;
        justify-content: center;
        text-align: center;
        text-transform: uppercase;
        font-weight: 700;
        color: black;

        &:not(.selected) {
            background: oklch(96.8% 0.007 247.896);
        }
        
        &.selected {
            background: #a1ce69;
        }
    }
}

.tabs {
    border-left: 2px solid #52b300;
}

@media( max-width: 849px ) {
    .tabbed-content__wrapper {
        flex-direction: column;
    }

    .tabs-sidebar {
        position: relative;
        flex-direction: row;
        margin-bottom: var(--space);
    }

    .tabs {
        border-top: 2px solid #52b300;
        border-left: 0;
    }
}