.collapse-caption{
    width: 100%;
    padding: 2rem 0;
    cursor: pointer;
    border-bottom: 0.1rem solid $color-smoke-dark;
    display: flex;
    justify-content: space-between;
    align-items: center;

    > [class^="icon-"] {
        font-size: 1.7rem;
        color: $color-info-dark
    }

    .sub-title{
        font-family: $font-title;
        font-size: 1.4rem;
        margin: 0;
        padding-left: 1.5rem;
        line-height: 1;
        flex-grow: 1;
    }

    .icon-arrow{
        color: $color-featured;
        font-size: 1.1rem;
        display: inline-block;
        transition: transform 0.2s ease-in-out;
    }
}

.collapse-content{
    display: none;
    overflow: hidden;
    padding: 1rem;
}

.collapse-box{
    &.open{
        .collapse-caption{
            .icon-arrow{
                transform: rotate(-180deg);
            }
        }
    }
}
