$card-padding:         40px                 !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: 15px;
        }
    }
}

.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: 428px;
}

article:nth-child(1) {
    .c-hero__image {
       width: 100vw !important;
    }
}
.entry-title a {
    @extend %fs50 !optional;
}

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

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

.read-more--arrow {
    display: inline;
    float: right;

    &:before {
        content: "";
        display: inline-block;
        vertical-align: middle;
        border-top: solid 3px #fff;
        width: 84px;
        height: 2px;

        @include below(small){
            width: 30px;
        }
    }
    &:after {
        content: "";
        display: inline-block;
        vertical-align: middle;;
        border: solid #fff;
        border-width: 0 3px 3px 0;
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        margin-left: -16px;
        margin-right:10px;
        padding: 6px;
    }
}