.faq {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;

    @media (min-width: 992px) {
        grid-template-columns: repeat(2, 1fr);
    }
}

.faq__item {
    border-block-end: 1px solid #000;
    margin-block: 0.5rem;
    padding-block: 0.5rem;
}

/* Remove the top margin and padding from the first faq item */
.faq__item:first-of-type {
    margin-block-start: 0;
    padding-block-start: 0;
}

.faq__question {
    cursor: pointer;
}

.faq__answer {
    padding-block: 1rem;
}

summary {
    /* Pin the custom marker to the container */
    position: relative;
    /* Register summary as an anchor element */
    anchor-name: --summary;

    &::marker {
        content: '';
    }

    &::before,
    &::after {
        /* Custom marker dimensions */
        content: '';
        border-block-start: 3px solid;
        height: 0;
        width: 1rem;

        /* Positions the lines */
        inset-block-start: 50%;
        inset-inline-end: 0;

        /* Anchor the shape to the summary */
        position: absolute;
        position-anchor: --summary;
        position-area: top end;
    }

    /* Rotate just the ::after line to create a "+"" shape */
    &::after {
        transform: rotate(90deg);
        transform-origin: 50%;
    }
}

/* Rotate the line when open */
.faq__item[open] .faq__summary::after {
    transform: rotate(0deg);
}