.accordion {
    color: $dark;
    margin: 0;
    padding: 1rem 3.5rem;
    font-size: 1.125rem;
    color: $white;
    background-color: $primary;
    border-top: 1px solid $gray-300;
    font-weight: $font-weight-medium;
    position: relative;
    transition: all .3s ease;
    cursor: pointer;
    &:after {
        display: inline-block;
        vertical-align: 0;
        content: "";
        border-top: 0.5rem solid;
        border-right: 0.325rem solid transparent;
        border-bottom: 0;
        border-left: 0.325rem solid transparent;
        position: absolute;
        top: 24px;
        left: 24px;
        transition: all .3s ease;
    }
    &:hover {
        &:after {
            transform: rotateZ(180deg);
        }
    }
    &.collapsed {
        background: transparent;
        color: $primary;
        &:after {
            transform: rotateZ(180deg);
        }
        &:hover {
            color: $accent;
            &:after {
                transform: rotateZ(0deg);
            }
        }
        &.last {
            border-bottom: 1px solid $gray-300;
        }
    }
    &-content {
        padding: .75rem 3.5rem;
        color: $white;
            background: $primary;
    }
}