/* Break Points */

@tablet: ~"only screen and (max-width: 1025px)";
@tablet-portrait: ~"only screen and (max-width: 800px)";
@tablet-portrait-only: ~"only screen and (min-width: 767px) and (max-width: 800px)";
@mobile: ~"only screen and (max-width: 767px)";
@mobile-small: ~"only screen and (max-width: 480px)";

/* variables */

@dark-blue: #0b3f54;
@yellow-color: #fed115;

/* Article Cards */
.article_cards {
    background-color: #fff;
    min-height: 430px;
    margin: 0px !important;
    position: relative;
    transition: all 0.2s linear;

    hr {
        width: 32px;
        height: 2px;
        background-color: #e2ddd8;
        margin: 20px 90% 20px 0 !important;
        border-bottom: 0px;
    }

    .article_img {
        width: 100%;
        min-height: auto;
        background-color: #ffffff !important;
        position: relative;
        overflow: hidden;
        height: 200px !important;
        transition: all 0.2s linear;

        &:before {
            content: "";
            display: block;
            width: 100%;
            right: 0;
            height: 7px;
            bottom: 0;
            position: absolute;
            opacity: 0.9;
            background-color: #e7504b;
            z-index: 1;
            transition: all 0.2s linear;
        }

        &:after {
            content: "";
            display: block;
            width: 100%;
            right: 0;
            height: 32px;
            background-color: #e7504b;
            bottom: 0;
            opacity: 0.9;
            position: absolute;
            transition: all 0.2s linear;
        }

        img {
            height: 100%;
            object-fit: cover;
            width: 100%;
            transform: scale(1.2);
            display: block;
            transition: all 0.2s linear;
        }
    }

    .card_body {
        padding: 24px;
    }

    .top_holding {
        margin-top: 15px;

        .date,
        .content_top {
            font-family: "acumin-pro-condensed";
            font-size: 13px;
            font-weight: normal;
            font-style: normal;
            font-stretch: normal;
            line-height: 1.08;
            letter-spacing: normal;
            text-align: right;
            color: #6c6c6c;
            display: inline-block;
        }

        .content_top {
            text-align: left;
            display: inline-block;
            vertical-align: top;
        }

        .date {
            float: right;
            vertical-align: top;
        }
    }

    h4 {
        min-height: 78px;

        a {
            font-family: "acumin-pro-condensed";
            font-size: 22px !important;
            font-weight: 900;
            font-style: normal;
            font-stretch: normal;
            line-height: 1.27;
            letter-spacing: normal;
            color: @dark-blue;
            text-transform: none;

            &:hover {
                color: #6c6c6c;
            }
        }
    }

    .read_article {
        font-family: "acumin-pro-condensed";
        font-size: 18px;
        font-weight: 600;
        font-style: normal;
        font-stretch: normal;
        line-height: 1;
        letter-spacing: 0.2px;
        color: @dark-blue;

        .far {
            font-size: 13px;
            font-weight: bold;
            margin-left: 10px;
            transition: all 0.2s linear;
        }
    }

    &:hover {
        box-shadow: 8px 8px 16px 0 rgba(207, 198, 190, 0.48), 16px 16px 24px 0 rgba(207, 198, 190, 0.24);

        .read_article i {
            margin-left: 14px;
        }

        .article_img {
            height: 190px !important;
            margin-bottom: 10px;

            &:before {
                height: 12px;
            }

            &:after {
                height: 41px;
            }

            img {
                transform: scale(1);
            }
        }
    }
}