svthalia/concrexit

.card {
    position: relative;
    display: block;
    margin-bottom: 15px;
    background-color: var(--card-background);
    border-radius: 0;
    border: 0;
    width: 100%;

    img {
        width: 100%;
    }

    .card-img-top {
        border-top-right-radius: 0;
        border-top-left-radius: 0;
    }

    .card-img-inside {
        margin-bottom: 15px;
    }

    .card-block {
        padding: 15px;
    }

    .card-title {
        color: var(--sub-title-color);
        font-size: 1.3rem;
        margin-top: 0;
        margin-bottom: 15px;
    }

    .card-text {
        font-size: .9rem;
        color: var(--card-background-contrast);
    }

    .card-btn {
        margin-top: 5px;
    }

    .card-header {
        display: flex;
        align-items: center;

        cursor: pointer;
        font-size: 15px;
        font-weight: 700;
        text-transform: uppercase;
        padding: 1.25rem;
        color: var(--card-background-hover-contrast);
        background-color: var(--card-background-hover);
        border-radius: 0;

        transition: all 300ms ease-in-out 0s;
        -moz-transition: all 300ms ease-in-out 0s;
        -webkit-transition: all 300ms ease-in-out 0s;
        -o-transition: all 300ms ease-in-out 0s;

        a {
            color: var(--card-background-hover-contrast);
        }

        &.collapsed {
            color: var(--card-background-contrast);
            background-color: var(--card-background);

            a {
                color: var(--card-background-contrast);
            }

            &:hover {
                color: var(--card-background-hover-contrast);
                background-color: var(--card-background-hover);

                a {
                    color: var(--card-background-hover-contrast);
                }
            }
        }
    }

    .show {
        .card-body {
            border-bottom: 1px solid rgba(0, 0, 0, .125);
        }
    }
}