.faq-container {
    --faq-container-gap: 1rem;
    display: flex;
    gap: var(--faq-container-gap);
    flex-wrap: wrap; /* Allow items to wrap */
    padding-inline: 1rem;
}

.faq-item {
    flex: 1 1 100%;

}

.faq-question {
    width: 100%;
    background-color: var(--clr-primary-75);
    color: white;
    padding: 15px;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 18px;
    border-radius: 5px;
}

.faq-question:hover {
    background-color: var(--clr-primary-40);
}

.faq-answer {
    padding: 15px;
    border: 1px solid #ddd;
    border-top: none;
    display: none;
    border-radius: 0 0 5px 5px;
}

.faq-answer p {
    margin: 0;
}

@media (min-width: 768px) {
    .faq-page > .faq-item{
        flex: 1 1 calc(50% - var(--faq-container-gap)/2);
        max-width: calc(50% - var(--faq-container-gap)/2);
    }
}