.faq-inner-wrapper{
    display: grid;
    gap: 16px;
    padding: 10px;
    width: 100%;
}

.faq-header > svg{
        transform: rotateZ(0deg);
        transition: transform 200ms ease-in, fill 250ms ease-in;
    }

    .faq-content.active svg{
        transform: rotateZ(180deg);
        transition: transform 200ms ease-out, fill 250ms ease-out;
    }

    .faq-content{
        position: relative;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
        border-radius: 5px;
        padding: 10px;

        transition: color 250ms ease-in-out;

        overflow: hidden;
        z-index: 1;
    }

    .faq-content::before{
        content: '';
        position: absolute;

        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;

        background-color: #2e3669;

        transform: scaleY(0);
        transform-origin: bottom;
        transition: transform 250ms ease-in-out;
    }

    .faq-content:hover::before{
        transform: scaleY(1);
    }

    .faq-content:hover{
        cursor: pointer;
        color: white;
    }

    .faq-content:hover svg{
        fill: white;
    }

/* OUTER */
.faq-outer-wrapper{
    text-align: center;
}

/* DESCRIPTION */

.faq-desc {
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
  display: grid;
}

.faq-desc-inner {
  overflow: hidden;
}

.faq-content.active .faq-desc {
  grid-template-rows: 1fr !important;
}