#accordion {
    .container {
        padding: 31px 0 70px;

        .accordion {
            display:        flex;
            flex-direction: column;
            gap:            30px;
            margin:         0 212px 0 220px;

            .accordion-item {
                background-color: transparent;
                display:          flex;
                flex-direction:   column;
                gap:              31px;
            }

            .accordion-header {
                font-size:      18px;
                font-style:     normal;
                font-weight:    600;
                line-height:    24px;
                color:          #2F1D49;

                display:         flex;
                align-items:     center;
                justify-content: space-between;
                cursor:          pointer;
            }

            .accordion-content {
                max-height: 0;
                overflow:   hidden;
                transition: max-height 0.3s ease-out, padding-bottom 0.3s;

                display:        flex;
                flex-direction: column;
                padding-bottom: 0;

                & div {
                    padding: 20px 0;
                }

                & iframe {
                    max-width:      100%;
                    width:          100%;
                    aspect-ratio:   16 / 9;
                }

                & p {
                    font-size:      16px;
                    font-style:     normal;
                    font-weight:    400;
                    line-height:    22px;
                    color:          #454545;
                    padding-bottom: 5px;

                    &.main {
                        font-weight: 600;
                        color:       #2F1D49;
                    }

                    & a {
                        text-decoration-line: underline;
                        color:                #454545;
                    }

                    & + p img {
                        width:          100%;
                        max-width:      100%;
                        max-height:     441px;
                        padding-top:    10px;
                        object-fit:     contain;
                        background:     #f8f9fa;
                    }

                    &:has(strong) {
                        padding-top: 10px;
                    }
                }
            }

            .icon {
                align-items: center;
                display:     flex;
                transition:  0.3s;

                & svg {
                    width:  24px;
                    height: 24px;
                }
            }

            .open {
                .icon {
                    transform: rotate(-180deg);
                }

                & .accordion-content {
                    padding-bottom: 30px;
                }
            }
        }
    }
}

@media screen and (max-width: 1280px) {
    #accordion {
        .container {
            .accordion {
                margin: 0 100px;
            }
        }
    }
}

@media screen and (max-width: 1024px) {
    #accordion {
        .container {
            .accordion {
                margin: 0 80px;
            }
        }
    }
}

@media screen and (max-width: 768px) {
    #accordion {
        .container {
            .accordion {
                margin: 0;
            }
        }
    }
}

@media screen and (max-width: 480px) {
    #accordion {
        .container {
            padding: 20px 0 30px;

            .accordion {
                gap: 20px;

                .accordion-item {
                    gap: 20px;

                    &:not(:last-child) {
                        border-bottom:  1px solid #F1F0EF;
                    }
                }

                .accordion-header {
                    align-items:    flex-start;
                    font-size:      14px;
                    line-height:    20px;
                }

                .accordion-content {
                    & div {
                        padding: 20px 0;
                    }

                    & p {
                        font-size:   12px;
                        line-height: 18px;
                    }
                }

                .open {
                    & .accordion-content {
                        padding-bottom: 20px;
                    }
                }
            }
        }
    }
}