.accordion-nav {}
.accordion-nav > .title {
    text-transform: capitalize;
    font-weight: 700;
    font-style: italic;
}
@media (min-width: 900px) {
    .accordion-nav { position: relative; }
    .accordion-nav > .title {
        position: absolute; top: 50px; right: 50px; left: 50px; z-index: 1;

        text-align: right;
        color: #000;
        
        pointer-events: none;
    }
    .loaded .accordion-nav > .title { transition: color .2s ease-out; }
    .accordion-nav:hover > .title { color: var(--main-color); }
    .accordion-nav > .title > span { font-weight: 100; }
    .modal .accordion-nav > .title { top: 25px; right: 100px; left: 25px; }

    /*-------------------------------------------------------------------------------------------------------------------------------*/

    .accordion-nav > .slides {
        display: flex; width: 100%; height: 600px; overflow: hidden;
        flex-direction: row;
        
        border-radius: 40px;
        
        isolation: isolate;
    }
    .accordion-nav > .slides > .slide {
        position: relative;
        height: 100%; overflow: hidden;
        transition: flex .8s ease-in-out;
        
        isolation: isolate;
    }
    .accordion-nav > .slides > .slide:not(:first-child) { border-bottom-left-radius: 40px; }
    .accordion-nav > .slides > .slide:not(:last-child) { margin-right: -40px; }

    /*-------------------------------------------------------------------------------------------------------------------------------*/

    .accordion-nav > .slides > .slide { flex: 1; }
    .accordion-nav > .slides:not(:hover) > .slide:first-child { flex: 3; }
    .accordion-nav > .slides:not(:hover) > .slide:first-child > .background:after {
        background-color: #000;
        opacity: .3;
    }
    .accordion-nav > .slides:not(:hover) > .slide:first-child > .overlay {
        transform: translateX(-20px);
        opacity: 0;

        transition:
            transform .4s ease-out,
            opacity   .4s ease-out;
    }
    .accordion-nav > .slides:not(:hover) > .slide:first-child > .content {
        transform: translateX(0px);
        opacity: 1;
        
        transition:
            transform .4s ease-out .6s,
            opacity   .4s ease-out .6s;
    }
    
    .accordion-nav > .slides:hover > .slide { flex: 1; }
    .accordion-nav > .slides:hover > .slide:hover { flex: 3 !important; }

    /*-------------------------------------------------------------------------------------------------------------------------------*/

    .accordion-nav > .slides > .slide > .background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; }
    .accordion-nav > .slides > .slide > .background > img {
        position: relative; z-index: 1;
        display: block; height: 100%; width: 100%;

        object-fit: cover;
        object-position: center left;
    }
    .accordion-nav > .slides > .slide > .background:after {
        content: '';
        position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2;

        opacity: .9;

        transition:
            background-color .8s ease-out,
            opacity          .8s ease-out;
    }
    .accordion-nav > .slides > .slide:nth-child(4n + 1) > .background:after { background-color: #FFFFFF; }
    .accordion-nav > .slides > .slide:nth-child(4n + 2) > .background:after { background-color: #AEFF98; }
    .accordion-nav > .slides > .slide:nth-child(4n + 3) > .background:after { background-color: #F2F2F2; }
    .accordion-nav > .slides > .slide:nth-child(4n + 0) > .background:after { background-color: #C0C0C0; }
    .accordion-nav > .slides > .slide:hover > .background:after {
        background-color: #000;
        opacity: .3;
    }

    /*-------------------------------------------------------------------------------------------------------------------------------*/

    .accordion-nav > .slides > .slide > .overlay {
        position: absolute; top: 100px; bottom: 50px; left: 50px; transform: translateX(0);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        opacity: 1;

        transition:
            transform .4s ease-out .8s,
            opacity   .4s ease-out .8s;
    }
    .accordion-nav > .slides > .slide:hover > .overlay {
        transform: translateX(-20px);
        opacity: 0;

        transition:
            transform .4s ease-out,
            opacity   .4s ease-out;
    }
    .accordion-nav > .slides > .slide > .overlay > .title {
        transform: rotate(180deg);
        max-width: 300px;
        
        writing-mode: tb-rl;
        
        font-size: 25px;
        font-weight: 700;
    }
    .accordion-nav > .slides > .slide > .overlay > .number {
        margin-top: 20px;

        font-size: 70px;
        font-weight: 700;
    }

    /*-------------------------------------------------------------------------------------------------------------------------------*/

    .accordion-nav > .slides > .slide > .content {
        transform: translateX(-20px);
        display: flex; height: 100%; width: 100%;
        flex-direction: column;
        justify-content: flex-end;
        align-items: stretch;

        color: #FFF;
        opacity: 0;

        transition:
            transform .2s ease-out,
            opacity   .2s ease-out;
    }
    .accordion-nav > .slides > .slide:not(:last-child) > .content { padding: 50px 90px 50px 50px; }
    .accordion-nav > .slides > .slide:last-child > .content { padding: 50px; }
    .accordion-nav > .slides > .slide:hover > .content {
        transform: translateX(0px);
        opacity: 1;

        transition:
            transform .4s ease-out .6s,
            opacity   .4s ease-out .6s;
    }
    .accordion-nav > .slides > .slide > .content > .title {
        max-width: 450px;
        margin-bottom: 50px;

        font-size: 35px;
        font-weight: 700;
    }
    .accordion-nav > .slides > .slide > .content > .description {
        max-width: 400px;
        margin-bottom: 30px;

        font-size: 15px;
    }
    .accordion-nav > .slides > .slide > .content > .row {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
    }
    .accordion-nav > .slides > .slide > .content > .row > .number {
        font-size: 70px;
        font-weight: 700;
    }
    .accordion-nav > .slides > .slide > .content > .row > .cta-link {}
}
@media (max-width: 899.99px) {
    .accordion-nav {}
    .accordion-nav > .title {
        margin-bottom: 50px;
        text-align: center;
    }

    /*-------------------------------------------------------------------------------------------------------------------------------*/

    .accordion-nav > .slides {
        overflow: hidden;
        border-radius: 40px;
    }
    .accordion-nav > .slides > .slide {
        position: relative;
        overflow: hidden;
        padding: 25px;
        
        border-radius: 40px;
    }
    .accordion-nav > .slides > .slide:not(:last-child) {
        margin-bottom: -70px;
        padding-bottom: 95px;
    }

    /*-------------------------------------------------------------------------------------------------------------------------------*/

    .accordion-nav > .slides > .slide > .background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; }
    .accordion-nav > .slides > .slide > .background > img {
        position: relative; z-index: 1;
        display: block; height: 100%; width: 100%;

        object-fit: cover;
        object-position: center left;
    }
    .accordion-nav > .slides > .slide > .background:after {
        content: '';
        position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2;

        background-color: #000;
        opacity: .3;
    }

    /*-------------------------------------------------------------------------------------------------------------------------------*/

    .accordion-nav > .slides > .slide > .overlay { display: none; }

    /*-------------------------------------------------------------------------------------------------------------------------------*/

    .accordion-nav > .slides > .slide > .content {
        position: relative;
        display: flex; min-height: 150px;
        flex-direction: column;
        justify-content: center;
        
        color: #FFF;
    }
    .accordion-nav > .slides > .slide > .content > .title {
        max-width: 150px;
        
        font-size: 20px;
        font-weight: 700;
    }
    .accordion-nav > .slides > .slide > .content > .description { display: none; }
    .accordion-nav > .slides > .slide > .content > .row { display: contents; }
    .accordion-nav > .slides > .slide > .content > .row > .number {
        order: -1;
        
        font-size: 40px;
        font-weight: 700;
    }
    .accordion-nav > .slides > .slide > .content > .row > .corner-arrow-link {
        position: absolute; top: 50%; right: 0; transform: translateY(-50%);
        height: 100px;
        padding-right: 100px;
    }
    .accordion-nav > .slides > .slide > .content > .row > .corner-arrow-link:before { bottom: 0; }
    .accordion-nav > .slides > .slide > .content > .row > .corner-arrow-link:after { top: 50%; }
    .accordion-nav > .slides > .slide > .content > .row > .corner-arrow-link > span { display: none; }
}