.mod-toggle {
    margin: 30px 0;

    @include mq(desktop) {
        margin: 60px 0;
    }

    > .m-wrapper {
        display: block;
        flex-direction: row;
        justify-content: center;
        gap: 10px;

        @include mq(desktop) {
            display: flex;
            gap: 80px;
        }

        > .m-text-content {
            > h2 {
                font-size: $font-size-title;
                color: $color-red;
                font-weight: $font-weight-bold;
                margin-bottom: 20px;
            }

            > p {
                font-size: $font-size-text;
                line-height: $line-height-text;
            }
        }

        > .m-content {
            margin-top: 31px;
            width: 100%;

            @include mq(desktop) {
                margin-top: 0;
            }

            > .m-item {
                position: relative;
                border-bottom: 1px solid black;
                cursor: pointer;
                padding: 25px 85px 15px 25px;

                @include mq(desktop) {
                    padding: 45px 115px 45px 45px;
                }

                &.is-active {
                    box-shadow: 0 0 144px 0 rgba(0, 0, 0, 0.1);
                    border-bottom: 0;
                }

                > label {
                    height: 100%;
                    display: block;
                    cursor: pointer;
                    list-style: none;
                    position: relative;

                    &::before {
                        content: '';
                        background-image: url('../../assets/svg/plus.svg');
                        background-position: 50%;
                        background-repeat: no-repeat;
                        background-size: 30px;
                        height: 30px;
                        position: absolute;
                        right: -70px;
                        top: calc(50% - 20px);
                        transition: all 0.2s;
                        width: 30px;

                        @include mq(desktop) {
                            right: -88px;
                            top: 50%;
                            transform: translateY(-50%);
                        }
                    }

                    &.is-active {
                        &::before {
                            background-image: url('../../assets/svg/neg.svg');
                            height: 30px;
                            width: 30px;
                        }
                    }

                    > button {
                        cursor: pointer;
                        border: 0;
                        background-color: transparent;

                        &:focus {
                            .is-keyboard-focus & {
                                border: 1px dashed;
                            }
                        }

                        > h3 {
                            margin: 0;
                            text-align: start;
                            font-size: $font-size-title-accordion;
                            font-weight: $font-weight-bold;
                            color: $color-gray;

                            @include mq(desktop) {
                                padding-right: 0;
                            }
                        }
                    }
                }

                > .m-text {
                    padding: 0;
                    line-height: 26px;
                    max-height: 0;
                    display: none;
                    transition: 0.2s all linear;
                    margin-top: 28px;
                    margin-bottom: 0;

                    &.is-active {
                        max-height: 100%;
                        display: block;
                    }

                    > ul {
                        list-style: unset;
                    }
                }
            }
        }
    }
}