.nt-tabs {

    --header-gap: 26px;
    --icon-width: 62px;
    --arrow-width: 60px;
    --arrow-left-margin: 35px;

    display: flex;
    flex-direction: column;
    gap: 14px;
}

.nt-tabs__tab {
    border-radius: 10px;
    background: white;
    padding: 24px 32px 24px 16px;
    transition: .3s;
}
.nt-tabs__tab.active {
    background: var(--e-global-color-primary);
}

.nt-tabs__tab-header {
    cursor: pointer;
    display: flex;
    gap: var(--header-gap);
    align-items: center;
}

.nt-tabs__tab-icon {
    flex: 0 0 var(--icon-width);
}
.nt-tabs__tab-title {
    flex: 1;
    transition: .3s;
}
.nt-tabs__tab-arrow {
    flex: 0 0 var(--arrow-width);
    height: var(--arrow-width);
    margin-left: var(--arrow-left-margin);

    border-radius: 100%;
    background: #F6F6F9;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s;
}
.nt-tabs__tab-content {
    transition: .3s;

    display: grid;
    grid-template-rows: 0fr;
}
.nt-tabs__tab-content-inner {
    overflow: hidden;
    min-height: 0;
    opacity: 0;
    transition: .3s;
    padding-right: calc(var(--arrow-width) + var(--header-gap) + var(--arrow-left-margin));
    padding-left: calc(var(--icon-width) + var(--header-gap));
}
.nt-tabs__tab-content-inner .txt {
    border-top: 1px solid rgba(255, 255, 255, .2);
    padding-top: 15px;
    padding-bottom: 10px;
}

.nt-tabs__tab.active .nt-tabs__tab-content {
    grid-template-rows: 1fr;
}
.nt-tabs__tab.active .nt-tabs__tab-content-inner {
    opacity: 1;
}
.nt-tabs__tab.active .nt-tabs__tab-arrow {
    background: var(--e-global-color-secondary);
    transform: rotate(90deg);
}

@media (max-width: 767px) {
    .nt-tabs {
        --header-gap: 18px;
        --icon-width: 38px;
        --arrow-width: 38px;
        --arrow-left-margin: 12px;
    }
    .nt-tabs__tab {
        padding: 18px 12px 18px 12px;
    }
}