.faq {
    margin: 2vh 5vw;

    h1 {
        text-align: center;
        margin: 0;
        padding: 2vh;
    }

    details {
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
        padding: 2.5vh 0;

        &:first-of-type {
            border-top: 1px solid rgba(0, 0, 0, 0.2);
        }

        summary {
            user-select: none;
            list-style: none;
            cursor: pointer;

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

            &::after {
                content: "+";
            }
        }

        &[open] summary::after {
            content: "−";
        }

        .faq-content {
            display: grid;
            grid-template-columns: 90% 10%;
            gap: 2vw;
            align-items: center;

            margin-right: 3vw;

            img {
                width: 100%;
                height: auto;
                object-fit: contain;
            }
        }
    }

    @media (max-width: 1199px) {
        details {
            .faq-content {
                grid-template-columns: 1fr;
                gap: 1rem;

                img {
                    width: 60%;
                    margin: 0 auto;
                }
            }
        }
    }
}