// -----------------------------------------------------------------------------
// Cards
// -----------------------------------------------------------------------------

$base-card-list-columns: 1;
$medium-card-list-columns: 3;
$large-card-list-columns: 4;
$card-list-columns-spacing: 1%;

.card-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;

    &__item {
        @extend %p;
        @extend %mb--large;

        position: relative;
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
        border-radius: 4px;
        border: solid 2px rgba(get-color(brand, primary), .05);

        @include bk(medium) {
            width: (100% / $medium-card-list-columns - $card-list-columns-spacing * 2);
            margin-left: $card-list-columns-spacing;
            margin-right: $card-list-columns-spacing;
        }

        @include bk(large) {
            width: (100% / $large-card-list-columns - $card-list-columns-spacing * 2);
            margin-left: $card-list-columns-spacing;
            margin-right: $card-list-columns-spacing;
        }

        &--large {
            @include bk(medium) {
                max-width: 600px;
                width: 48%;
            }

            @include bk(large) {
                max-width: 600px;
                width: 48%;
            }
        }

        &--faded {
            background-color: rgba(get-color(brand, primary), .05);
        }

        &--sponsor {
            @extend %p0;
            max-width: none;
            width: auto;
        }
    }

    &--centered {
        justify-content: center;
    }
}

.card {
    display: flex;
    flex-direction: column;
    align-content: space-between;
    align-items: stretch;
    flex: 1;
    min-height: 360px;

    &__content {
        flex: 1;
    }

    &__footer {
        align-self: flex-end;
    }
}


.book-cover {
    position: relative;
    display: block;
    width: 100%;
    height: 0;
    padding-top: 153.846153846%; // 325px x 500px

    img {
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
    }
}

.sponsor-content {

    @include bk('medium') {
        display: flex;
    }

    @include bk('large') {
        display: flex;
    }

     &__image {
        flex: 1 400px;
     }

    &__body {
        @extend %pl;
        @extend %pr;
        @extend %pb;
    }
}
