.text-sections,
.container.text-sections {
    padding-top: calc(100vw * 100 / var(--page-width));
    padding-bottom: calc(100vw * 100 / var(--page-width));
    display: flex;
    flex-direction: column;
}

.text-sections.reduce-padding-top {
    padding-top: 0;
}

.text-sections.extra-margin-bottom {
    margin-bottom: calc(100vw * 64 / var(--page-width));
}

.text-sections > .grid12 > .title {
    -webkit-grid-column: 2 / span 10;
    grid-column: 2 / span 10;
    margin-bottom: calc(100vw * 44 / var(--page-width));
}

.text-sections.fee > .grid12 > .title {
    margin-bottom: calc(100vw * 32 / var(--page-width));
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text-sections.fee > .grid12 > .title .section-link:after {
    content: "→";
    margin-left: calc(100vw * 8 / var(--page-width));
}

.text-sections .text-section:not(:last-child) {
    margin-bottom: calc(100vw * 80 / var(--page-width));
}

.text-sections .inner {
    border-top: 2px solid var(--color-black);
    -webkit-grid-column: 2 / span 10;
    grid-column: 2 / span 10;
    display: grid;
    -webkit-grid-template-columns: repeat(10, 1fr);
    grid-template-columns: repeat(10, 1fr);
    -webkit-grid-gap: var(--padding-general);
    grid-gap: var(--padding-general);
    padding-top: calc(100vw * 24 / var(--page-width));
}

.text-sections.faq .inner,
.text-sections.featured .inner {
    border-top: 0;
    padding-top: 0;
}

.text-sections .row-title {
    -webkit-grid-column: span 4;
    grid-column: span 4;
    padding-right: calc(100vw * 50 / var(--page-width));
}

.text-sections .content {
    -webkit-grid-column: 5 / span 6;
    grid-column: 5 / span 6;
    display: flex;
    flex-direction: column;
}

.text-section .content .row {
    width: 100%;
    position: relative;
}

.text-sections .content .text:not(:last-child),
.text-sections .content .link:not(:last-child),
.text-sections .content .visual:not(:last-child) {
    margin-bottom: calc(100vw * 28 / var(--page-width));
}

.text-sections .content .text > ul,
.text-sections .content .tab .tab-content > ul {
    padding-left: calc(100vw * 28 / var(--page-width));
}

.text-sections .content .text > ol,
.text-sections .content .tab .tab-content > ol {
    padding-left: calc(100vw * 20 / var(--page-width));
}

.text-sections .content .text > ul:not(:last-child),
.text-sections .content .text > ol:not(:last-child),
.text-sections .content .tab .tab-content > ul:not(:last-child),
.text-sections .content .tab .tab-content > ol:not(:last-child) {
    margin-bottom: var(--line-height-body);
}

.text-sections .content .text > ul li:not(:last-child),
.text-sections .content .text > ol > li:not(:last-child) {
    margin-bottom: var(--line-height-body);
}

.text-sections .content .text > ul ul,
.text-sections .content .text > ol ul,
.text-sections .content .tab .tab-content > ul ul,
.text-sections .content .tab .tab-content > ol ul {
    padding-left: calc(100vw * 25 / var(--page-width));
    list-style-type: disc;
}

.text-sections .content .text span {
    margin-top: var(--line-height-body);
    font-size: var(--font-size-m1);
    line-height: var(--line-height-m1);
    color: var(--color-terciary);
    display: block;
}

.text-sections .content .tab {
    border-top: 2px solid var(--color-black);
    padding-top: calc(100vw * 14 / var(--page-width));
    padding-bottom: calc(100vw * 12 / var(--page-width));
    cursor: pointer;
}

.text-sections .content .tab > span {
    position: relative;
    width: 100%;
    display: block;
    transition: margin-bottom 0.35s ease;
    -webkit-transition: margin-bottom 0.35s ease;
    padding-right: calc(100vw * 40 / var(--page-width));
}

.text-sections .content .tab.active > span {
    margin-bottom: calc(100vw * 24 / var(--page-width));
    font-family: "FKGrotesk-Black", sans-serif;
}

.text-sections .content .tab > span:after {
    content: "+";
    font-size: var(--font-size-t1);
    line-height: var(--line-height-body);
    position: absolute;
    right: 0;
    top: 0;
}

.text-sections.faq .content .tab > span:after,
.text-sections.variation .content .tab > span:after {
    content: "+";
}

.text-sections.faq .content .tab.active > span:after,
.text-sections.variation .content .tab.active > span:after {
    content: "-";
}

.text-sections .content .tab .tab-content {
    height: 0;
    overflow: hidden;
    transition: height 0.35s ease;
    -webkit-transition: height 0.35s ease;
}

.text-section .content .row .link {
    display: block;
    width: 100%;
    border-top: 1px solid var(--color-black);
    padding-top: calc(100vw * 10 / var(--page-width));
    padding-right: calc(100vw * 30 / var(--page-width));
    text-decoration: none;
    position: relative;
}

.text-section .content .row .link:after {
    width: 16px;
    height: 16px;
    display: block;
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: calc(100vw * 10 / var(--page-width));
    transform: translateY(-50%);
    background-image: url(../../images/arrow-button-small.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.text-sections.variation .row-title,
.text-sections.variation .content {
    -webkit-grid-column: span 5;
    grid-column: span 5;
}

.text-sections.featured .row-title {
    -webkit-grid-column: span 3;
    grid-column: span 3;
}

.text-sections.featured .content {
    -webkit-grid-column: 4 / span 7;
    grid-column: 4 / span 7;
}

.text-sections .content a:not(.button) {
    text-decoration: underline;
}

.text-sections .content a.button {
    padding: calc(100vw * 8.5 / var(--page-width))
        calc(100vw * 15 / var(--page-width))
        calc(100vw * 7.5 / var(--page-width));
    display: inline-block;
}

.text-section .content .row .visual-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: var(--padding-general);
}

/* RESPONSIVE */
@media only screen and (max-width: 740px) {
    .text-sections,
    .container.text-sections {
        padding-top: calc(100vw * 66 / var(--page-width));
        padding-bottom: calc(100vw * 66 / var(--page-width));
    }

    .text-sections > .grid12 > .title {
        -webkit-grid-column: span 12;
        grid-column: span 12;
        margin-bottom: calc(100vw * 24 / var(--page-width));
    }

    .text-sections.fee > .grid12 > .title {
        flex-direction: column;
        align-items: flex-start;
        gap: calc(100vw * 24 / var(--page-width));
    }

    .text-sections .text-section:not(:last-child) {
        margin-bottom: calc(100vw * 50 / var(--page-width));
    }

    .text-sections .inner {
        padding-top: calc(100vw * 12 / var(--page-width));
        -webkit-grid-column: span 12;
        grid-column: span 12;
    }

    .text-sections .row-title .title {
        margin-top: calc(100vw * 12 / var(--page-width));
        margin-bottom: calc(100vw * 24 / var(--page-width));
        display: block;
    }

    .text-sections .row-title,
    .text-sections .content,
    .text-sections.variation .row-title,
    .text-sections.variation .content,
    .text-sections.featured .row-title,
    .text-sections.featured .content {
        -webkit-grid-column: span 10;
        grid-column: span 10;
        padding-right: 0;
    }

    .text-section .content .row .link:after {
        width: 12px;
        height: 12px;
        margin-top: calc(100vw * 4 / var(--page-width));
    }
}
