SCSS Nested Structure Conversion

.img-acc {
    .accordion {
        width: 100%;
        height: 695px;
        overflow: hidden;
        margin: auto;
        border: none;
        border-top: transparent !important;
        border-bottom: transparent !important;

        ul {
            width: 100%;
            display: flex;
            gap: 16px;
            table-layout: fixed;
            margin: 0;
            padding: 0;

            li {
                display: table-cell;
                vertical-align: bottom;
                position: relative;
                width: 16.666%;
                height: 540px;
                background-repeat: no-repeat;
                background-position: center center;
                transition: all 500ms ease;
                background-size: cover;

                div {
                    display: block;
                    overflow: visible;
                    width: 100%;

                    a {
                        display: block;
                        height: 540px;
                        width: 100%;
                        position: relative;
                        z-index: 3;
                        box-sizing: border-box;
                        color: $color-white;
                        text-decoration: none;
                        font-family: $font-regular;
                        transition: all 200ms ease;

                        p,
                        .button {
                            bottom: -118px;
                            top: auto;
                            position: absolute;
                            color: rgb(var(--color-heading));
                        }

                        .button {
                            bottom: -78px;
                            width: fit-content;
                            line-height: inherit;
                        }
                    }
                }

                &.normala {
                    div {
                        a {
                            * {
                                opacity: 0;
                                margin: 0;
                                width: 100%;
                                text-overflow: ellipsis;
                                position: relative;
                                z-index: 5;
                                white-space: nowrap;
                                overflow: hidden;
                                transform: translateX(-20px);
                                transition: all 400ms ease;
                            }
                        }
                    }

                    a {
                        background: rgba($color-black, 0.4);
                    }
                }

                &:nth-child(1) {
                    width: 60%;
                }
            }

            &:hover {
                li {
                    &.normalhover {
                        &:hover {
                            a {
                                background: rgba($color-black, 0);

                                * {
                                    opacity: 1;
                                    transform: translateX(0);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

.image-content-wrapper {
    .slide-content {
        padding: 24px;
    }
}

.clickcontent {
    h3 {
        position: absolute;
        left: 32px;
        bottom: 32px;
    }
}

.arrow {
    &.right-arrow {
        position: absolute;
        right: 0;
        transform: translate(50px, -50px);
        top: 50%;
    }

    &.left-arrow {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translate(-50px, -50px);
    }
}

li.normalhover {
    border-radius: 5px;
}

.swiperslidesOverview {
    display: none;
}

.acc-items-swiper {
    .slide-content {
        h3 {
            top: -48px;
            position: absolute;
            margin: 0;
            font-size: 1.5rem;
            color: $color-white;
        }
    }
}

@media screen and (max-width: 767px) {
    .img-acc {
        .accordion {
            height: auto;

            ul {
                li,
                & li.normalhover:hover,
                &:hover li,
                &:hover li.normalhover:hover {
                    position: relative;
                    display: table;
                    table-layout: fixed;
                    width: 100%;
                    transition: none;
                }
            }
        }

        .arrow {
            display: none;
        }

        display: none;
    }

    .swiperslidesOverview {
        display: block;
    }
}