.faq-list-page {
    padding-bottom: 3.125rem;
}

.faq-list-page article > button,
    .faq-list-page .x-faq-box > button,
    .faq-list-page .faq-list-page article button {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: transparent;
        border: none;
        padding: 0;
        margin: 0;
        font: inherit;
        color: inherit;
        text-align: left;
        width: 100%;
        display: block;
        cursor: pointer;
    }

/* Provide a visible, accessible focus ring (customize color if needed) */

.faq-list-page article > button:focus-visible,
    .faq-list-page .faq-list-page article button:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }

.faq-list-page .image-container {
        display: none;
    }

.faq-list-page .image-container img {
            border-radius: 0.375rem;
        }

.faq-list-page .faq-content {
        padding-top: 1.875rem;
    }

.faq-list-page .main-title-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10%;
        row-gap: 1.25rem;
        padding: 1.25rem 0 0;
    }

.faq-list-page .main-title-container .toggler-container {
            padding: 0;
        }

.faq-list-page .faq-item:first-child .x-faq-box .question {
                    border-top: 0.0625rem solid var(--color-grey);
                }

.faq-list-page .toggler-container {
        padding-top: 1.25rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

.faq-list-page .toggler-container .component-toggler {
            background-color: var(--color-grey);
        }

.faq-list-page .toggler-container .component-toggler .toggler-btn {
                padding: 0.75rem 1.25rem 1rem;
            }

.faq-list-page .faq-list {
        display: none;
    }

.faq-list-page .faq-list.active {
            display: block;
        }

.faq-list-page .faq-list .x-faq-box .question .title {
                    font-size: 1.25rem;
                }

@media screen and (min-width: 64rem) {
        .faq-list-page .main-title-container {
            padding-bottom: 2.5rem;
        }
        .faq-list-page .toggler-container {
            padding-block: 0 2.5rem;
            justify-content: flex-end;
        }
                .faq-list-page .toggler-container .component-toggler .toggler-btn {
                    padding: 0.75rem 1.75rem 1rem;
                }
            .faq-list-page .faq-container .faq-content {
                width: 100%;
                padding: 0;
            }
                    .faq-list-page .faq-list .x-faq-box .question .title {
                        font-size: 1.375rem;
                    }
}

@media screen and (min-width: 80rem) {
        .faq-list-page .faq-container {
            display: flex;
            align-items: flex-start;
            gap: 6.875rem;
        }
            .faq-list-page .faq-container .faq-content {
                padding: 0;
            }
                .faq-list-page .faq-container .faq-content.no-image {
                    width: 100%;
                }
            .faq-list-page .faq-container .image-container {
                width: calc(100% - 25.625rem);
                display: block;
            }
}

@media screen and (min-width: 96rem) {
        .faq-list-page .faq-container {
            display: flex;
            align-items: flex-start;
            gap: 9.375rem;
        }
            .faq-list-page .faq-container .faq-content {
                padding: 0;
            }
            .faq-list-page .faq-container .image-container {
                width: calc(100% - 42.1875rem);
                display: block;
            }
}