$card-padding:         35px                 !default;
$card-background:      transparent          !default;
$card-color:           transparent          !default;
$card-border-width:    0px                  !default;
$card-border-style:    solid                !default;
$card-border-color:    #DDDDDD              !default;
$card-radius:          0                    !default;


/*general cards styling */
.c-card {
    height: 100%;
    display: inline-block;
    vertical-align: top;

    padding: $card-padding;
    color: $card-color;
    background: $card-background;

    @if ($card-border-width != 0) {
        border: $card-border-width $card-border-style $card-border-color;
    }

    @if ($card-radius != 0) {
        border-radius: $card-radius;
    }

    /*cards setup */
    &:nth-child(4n-2), &:nth-child(4n-1) {
        width: 66%;
    }

    &:nth-child(4n), &:nth-child(4n+1) {
        width: 33%;
    }

    &:nth-child(n) {
        @include below(lap) {
            width: 100%;
        }

        @include below(small) {
            padding: 20px;
        }
    }

    &.portrait, &.tall {
        @include below(lap) {
            .entry-thumbnail {
                display: block;
                width: 45%;
                float: left;
            }
            .entry-header, .entry-content {
                display: inline-block;
                margin-left: 35px;
                width: 45%;
                float: left;

            }
        }
        @include below(small) {
            .entry-thumbnail, .entry-header, .entry-content  {
                width: 100%;
                margin-left:0;
            }
        }
    }
}

.c-card__media {
    img {
        width: 100%;
        display: block;
    }
}

.c-card__footer {
    margin-top: auto;
}

.c-card--inverse {
    // cards that have an inversed color scheme or image used as background
    position: relative;
    background: $card-color;
    color: $card-background;

    .c-card__media {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.c-card .entry-content {
    max-width: 420px;
    a {
        &:hover {
            text-decoration: none;
        }

        > p {
            margin-bottom: 46px;
            font-size: 16px;
            line-height: 24px;
            color: $color-dark;
        }

    }
}

article:nth-child(1) {
    .c-hero__image {
       width: 100% !important;
    }
}
.entry-title {
    padding: 0;
    margin-bottom: 38px;

    a {
        @extend %fs50 !optional;
        color: #424242;
        line-height: 50px;

        &:hover {
            text-decoration: none;
        }
    }
}

.entry-thumbnail {
    margin-bottom: 20px;
}

.separator:after{
    content:"";
    border-top:2px solid #0300FF;
    padding: 2px 25px;
    margin: 4px 20px;
    display: inline-block;
    transform: rotate(180deg);
}

.read-more--arrow {
 display: none;
}