.featured-tabs,
.featured-tabs.container {
    padding: calc(100vw * 80 / var(--page-width)) var(--padding-general)
        calc(100vw * 34 / var(--page-width));
}

.featured-tab {
    -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);
    margin-bottom: var(--padding-general);
}

.featured-tab > * {
    -webkit-grid-column: span 10;
    grid-column: span 10;
}

.featured-tab .title {
    padding-right: calc(100vw * 80 / var(--page-width));
    padding-bottom: var(--padding-general);
    cursor: pointer;
    border-bottom: 2px solid var(--color-black);
    position: relative;
}

.featured-tab .title:after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    bottom: var(--padding-general);
    width: calc(100vw * 45 / var(--page-width));
    height: calc(100vw * 45 / var(--page-width));
    background-image: url(../../images/featured-tab-open.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.featured-tab.active .title:after {
    background-image: url(../../images/featured-tab-close.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.featured-tab .tab-content {
    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);
    position: relative;
    height: 0;
    overflow: hidden;
    transition: height 0.35s ease;
    -webkit-transition: height 0.35s ease;
}

.featured-tab .tab-content .tab-inner-content {
    -webkit-grid-column: 5 / span 6;
    grid-column: 5 / span 6;
}

.featured-tab .tab-content .tab-inner-content .visual-container {
    margin-bottom: var(--padding-general);
}

.featured-tab .tab-content .tab-inner-content ul {
    padding-left: calc(100vw * 28 / var(--page-width));
}

.featured-tab .tab-content .tab-inner-content ul:not(:last-child) {
    margin-bottom: var(--line-height-body);
}

.featured-tab .tab-content .tab-inner-content p a {
    text-decoration: underline;
}

.featured-tab .featured-button {
    position: absolute;
    left: 0;
}

.featured-tab .featured-button a {
    padding-bottom: calc(100vw * 10 / var(--page-width));
    border-bottom: 2px solid var(--color-black);
}

.featured-tab .featured-button a:hover {
    opacity: 0.75;
}

.featured-tabs .featured-visual {
    -webkit-grid-column: span 12;
    grid-column: span 12;
}

.featured-tabs .visual-container {
    width: 100%;
}

/* LIST MODE */
.list-mode.featured-tabs {
    padding: calc(100vw * 80 / var(--page-width)) 0
        calc(100vw * 34 / var(--page-width));
    margin-bottom: calc(100vw * 80 / var(--page-width));
}

.featured-tabs .grid12 > .title {
    -webkit-grid-column: 2 / span 10;
    grid-column: 2 / span 10;
    padding: calc(100vw * 20 / var(--page-width)) var(--padding-general) 0;
    margin-bottom: calc(100vw * 64 / var(--page-width));
}

.featured-tabs .grid12 > .title:before {
    content: "";
    display: block;
    width: 79.6vw;
    height: 2px;
    left: var(--padding-general);
    background-color: var(--color-black);
    position: absolute;
    top: 0;
}

.list-mode.featured-tabs .grid12,
.list-mode .featured-tab {
    -webkit-grid-gap: 0 var(--padding-general);
    grid-gap: 0 var(--padding-general);
}

.list-mode .featured-tab {
    margin-bottom: 0;
    background-color: var(--color-white);
    -webkit-grid-template-columns: repeat(12, 1fr);
    grid-template-columns: repeat(12, 1fr);
    -webkit-grid-column: span 12;
    grid-column: span 12;
}

.list-mode .featured-tab .tab-content {
    -webkit-grid-template-columns: repeat(12, 1fr);
    grid-template-columns: repeat(12, 1fr);
    -webkit-grid-column: span 12;
    grid-column: span 12;
    background-color: var(--color-grey-3);
    padding: 0 var(--padding-general);
}

.list-mode .featured-tab .tab-content .tab-inner-content {
    -webkit-grid-column: 2 / span 10;
    grid-column: 2 / span 10;
    display: grid;
    -webkit-grid-template-columns: repeat(12, 1fr);
    grid-template-columns: repeat(12, 1fr);
    -webkit-grid-gap: var(--padding-general);
    grid-gap: var(--padding-general);
    padding: var(--padding-general) 0;
}

.list-mode .featured-tab .tab-content .tab-inner-content .text {
    -webkit-grid-column: span 5;
    grid-column: span 5;
}

.list-mode .featured-tab .tab-content .tab-inner-content .visual-container {
    -webkit-grid-column: 7 / span 6;
    grid-column: 7 / span 6;
}

.list-mode .featured-tab .tab-content .tab-inner-content .visual-container {
    margin-bottom: 0;
}

.list-mode .featured-tab .aspect-container {
    padding-bottom: 100% !important;
}

.list-mode .featured-tab .title {
    padding: 0;
    background: var(--color-white);
    border-bottom: 0;
    -webkit-grid-column: span 12;
    grid-column: span 12;
    display: grid;
    -webkit-grid-template-columns: repeat(12, 1fr);
    grid-template-columns: repeat(12, 1fr);
    -webkit-grid-gap: var(--padding-general);
    grid-gap: var(--padding-general);
    padding: 0 var(--padding-general);
}

.list-mode .featured-tab .title:before {
    content: "";
    z-index: 0;
    background: var(--color-black);
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    -webkit-transition: height 0.25s ease;
    transition: height 0.25s ease;
}

.list-mode .featured-tab.active .title:before,
.list-mode .featured-tab .title:hover:before {
    height: 100%;
}

.list-mode .featured-tab.active .title:before {
    background: var(--color-grey-3);
}

.list-mode .featured-tab .title:after {
    content: none;
}

.list-mode .featured-tab .title span {
    color: var(--color-black);
    position: relative;
    border-bottom: 1px solid var(--color-black);
    padding: var(--padding-general) 0;
    padding-right: calc(100vw * 120 / var(--page-width));
    display: block;
    -webkit-grid-column: 2 / span 10;
    grid-column: 2 / span 10;
}

.list-mode .featured-tab:not(.active) .title:hover span {
    color: var(--color-white);
}

.list-mode .featured-tab .title span:after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    bottom: var(--padding-general);
    width: calc(100vw * 36 / var(--page-width));
    height: calc(100vw * 36 / var(--page-width));
    background-image: url(../../images/featured-tab-open-black.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.list-mode .featured-tab:not(.active) .title:hover span:after {
    background-image: url(../../images/featured-tab-open-white.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.list-mode .featured-tab.active .title span:after {
    background-image: url(../../images/featured-tab-close-black.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

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

    .featured-tabs .title,
    .featured-tab {
        -webkit-grid-column: span 12;
        grid-column: span 12;
    }

    .featured-tab .title {
        padding-right: calc(100vw * 40 / var(--page-width));
        font-size: var(--font-size-t1);
        line-height: var(--line-height-t1);
    }

    .featured-tab .title:after {
        width: calc(100vw * 32 / var(--page-width));
        height: calc(100vw * 32 / var(--page-width));
    }

    .featured-tab .tab-content .tab-inner-content,
    .featured-tab .featured-button {
        -webkit-grid-column: span 10;
        grid-column: span 10;
    }

    .featured-tab .featured-button {
        position: relative;
        left: unset;
        margin-top: var(--padding-general);
    }

    .featured-tab .featured-button a {
        display: inline-block;
        margin-bottom: 2px;
        font-size: var(--font-size-body);
        line-height: var(--line-height-body);
        padding-bottom: calc(100vw * 6 / var(--page-width));
    }

    /* LIST MODE */
    .list-mode.featured-tabs {
        padding: calc(100vw * 66 / var(--page-width)) 0
            calc(100vw * 34 / var(--page-width));
        margin-bottom: calc(100vw * 48 / var(--page-width));
    }
    .featured-tabs .grid12 > .title,
    .list-mode .featured-tab .title span,
    .list-mode .featured-tab .tab-content .tab-inner-content {
        -webkit-grid-column: span 12;
        grid-column: span 12;
    }

    .list-mode .featured-tab .title,
    .list-mode .featured-tab .tab-content {
        padding: 0 var(--padding-general);
    }

    .featured-tabs .grid12 > .title {
        font-size: var(--font-size-h2);
        line-height: var(--line-height-h2);
        letter-spacing: var(--letter-spacing-h2);
        margin-bottom: calc(100vw * 28 / var(--page-width));
        padding: calc(100vw * 20 / var(--page-width)) var(--padding-general) 0;
    }

    .list-mode .featured-tab .title span {
        padding-right: 0;
    }

    .list-mode .featured-tab .title span:after {
        content: "" !important;
    }

    .list-mode .featured-tab .tab-content .tab-inner-content .text,
    .list-mode .featured-tab .tab-content .tab-inner-content .visual-container {
        -webkit-grid-column: span 12;
        grid-column: span 12;
    }

    .list-mode .featured-tab .tab-content .tab-inner-content .text {
        font-size: var(--font-size-body);
        line-height: var(--line-height-body);
    }
}