Faq Item

.faq-item {
    display: grid;
    border-radius: 4px;
    background-color: #000;
    padding: 0 $spacer--15;
    margin-bottom: $spacer--1;
    position: relative;
    grid-template-rows: 1rem 1fr;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "badge badge" "image content";
    min-height: 190px;

    &__question {
        font-size: $font-size-extra-large;
        color: $white;
        margin: $spacer--1 0 0 0;
        z-index: 1;
        min-height: 100px;
    }

    &__image {
        grid-area: image;
        flex: 0 0 48%;
    }

    &__content {
        grid-area: content;
        display: flex;
        flex-direction: column;
    }

    & .image {
        width: 185px;
        position: absolute;
        bottom: 0;
        left: $spacer--1;
    }

    &__button {
        justify-self: flex-end;
        grid-area: content;
        align-self: flex-end;
    }

    & .button__text {
        color: $white;
    }
}

// Need to refactor this
.faq-items {
    & .faq-item-4 {
        box-sizing: border-box;
        flex: 0 0 auto;
        flex-basis: 100%;
        padding-right: calc(14px * 0.5);
        padding-left: calc(14px * 0.5);
        max-width: 100%;

        @include mq($screen-m) {
            flex: 0 0 auto;
            padding-right: calc(14px * 0.5);
            padding-left: calc(14px * 0.5);
            flex-basis: 33.33333333%;
            max-width: 33.33333333%;
        }
    }
}