.articles-card {
    position: relative;
    max-width: 353px;
    margin: 0 auto 30px;
    transition: 0.3s;
    padding: 49px 31px 68px;
    --accent-color: #F25334;
}
.articles-card .articles-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--accent-color);
    opacity: 0.1;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 353 506"><path d="M49.0572 34.2366C132.423 27.4776 190 -18.9235 273.815 8.69609C316.734 22.839 360.119 57.0509 340.489 129.11C323.028 193.311 377.906 439.571 338.275 449C318.156 453.771 300.961 450.202 251.118 454.292C237.387 455.428 221.534 460.009 203.001 470.006C58 548.216 9.75189 482.295 1.98876 424.795C0.193678 411.504 0.893074 193.576 3.6906 180.494C17.888 113.831 -35.2649 41.0714 49.0572 34.2366Z"/></svg>');
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 353 506"><path d="M49.0572 34.2366C132.423 27.4776 190 -18.9235 273.815 8.69609C316.734 22.839 360.119 57.0509 340.489 129.11C323.028 193.311 377.906 439.571 338.275 449C318.156 453.771 300.961 450.202 251.118 454.292C237.387 455.428 221.534 460.009 203.001 470.006C58 548.216 9.75189 482.295 1.98876 424.795C0.193678 411.504 0.893074 193.576 3.6906 180.494C17.888 113.831 -35.2649 41.0714 49.0572 34.2366Z"/></svg>');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    mask-position: center center;
    -webkit-mask-size: cover;
    mask-size: cover;
}
.articles-card .articles-card-image-wrapper {
    position: relative;
    z-index: 2;
    overflow: hidden;
    width: 290px;
    height: 190px;
    margin-bottom: 30px;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 291 189"><g transform="translate(0.000000,189.000000) scale(0.050000,-0.050000)"><path d="M2160 3767 c-1208 -86 -1782 -308 -1955 -758 -286 -742 -257 -1996 60 -2559 148 -263 1007 -418 2455 -443 1626 -29 2626 113 2793 397 426 727 399 2181 -51 2752 -330 416 -1915 710 -3302 611z"/></g></svg>');
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 291 189"><g transform="translate(0.000000,189.000000) scale(0.050000,-0.050000)"><path d="M2160 3767 c-1208 -86 -1782 -308 -1955 -758 -286 -742 -257 -1996 60 -2559 148 -263 1007 -418 2455 -443 1626 -29 2626 113 2793 397 426 727 399 2181 -51 2752 -330 416 -1915 710 -3302 611z"/></g></svg>');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    mask-position: center center;
    -webkit-mask-size: cover;
    mask-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.articles-card .articles-card-image-layers {
    position: absolute;
    top: 100%;
    left: 0;
    width: 290px;
    height: 190px;
    display: flex;
    transition: 0.5s;
}
.articles-card .articles-card-image-layers .articles-card-image-layer {
    width: 25%;
    height: 100%;
    transition: 0.5s;
    overflow: hidden;
}
.articles-card .articles-card-image-layers .articles-card-image-layer:nth-child(1) {
    transition-delay: 0s;
}
.articles-card .articles-card-image-layers .articles-card-image-layer:nth-child(2) {
    transition-delay: 0.1s;
}
.articles-card .articles-card-image-layers .articles-card-image-layer:nth-child(3) {
    transition-delay: 0.2s;
}
.articles-card .articles-card-image-layers .articles-card-image-layer:nth-child(4) {
    transition-delay: 0.3s;
}
.articles-card .articles-card-image-layers .articles-card-image-layer-bg {
    position: absolute;
    left: 0;
    width: 290px;
    height: 190px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.articles-card .articles-card-image-layers .articles-card-image-layer:nth-child(2) .articles-card-image-layer-bg{
    left: -100%;
}
.articles-card .articles-card-image-layers .articles-card-image-layer:nth-child(3) .articles-card-image-layer-bg{
    left: -200%;
}
.articles-card .articles-card-image-layers .articles-card-image-layer:nth-child(4) .articles-card-image-layer-bg{
    left: -300%;
}

.articles-card .articles-card-image-link {
    display: flex;
    width: 100%;
    height: 100%;
    background-color: rgba(11, 32, 56, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transform: translateY(-20%);
    transition: opacity 500ms ease, transform 500ms ease;
}
.articles-card .articles-card-image-link:before,
.articles-card .articles-card-image-link:after {
    content: "";
    width: 32px;
    height: 2px;
    background-color: #ffffff;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.articles-card .articles-card-image-link:after {
    transform: translate(-50%, -50%) rotate(90deg);
}
.articles-card .articles-card-image-link span {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
.articles-card .articles-card-content {
    padding: 0;
    position: relative;
    z-index: 2;
}
.articles-card .articles-card-content .articles-card-content-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.articles-card .articles-card-content .articles-card-content-top .articles-card-content-category {
    background-color: var(--accent-color);
    line-height: 1;
    color: #ffffff;
    padding: 8px 10px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    transition: all 500ms ease;
}
.articles-card .articles-card-content .articles-card-content-top .articles-card-content-date {
    line-height: 1;
    color: var(--accent-color);
}
.articles-card .articles-card-content .articles-card-content-title {
    color: #0B2038;
    font-size: 24px;
    font-weight: 400;
    margin-top: 15px;
    margin-bottom: 23px;
}
.articles-card .articles-card-content .articles-card-content-title a {
    color: inherit;
    background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0 95% / 0 1px no-repeat;
    transition: all 500ms ease;
}
.articles-card .articles-card-content .articles-card-content-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.articles-card .articles-card-content .articles-card-content-bottom .articles-card-content-author {
    display: flex;
    align-items: center;
}
.articles-card .articles-card-content .articles-card-content-bottom .articles-card-content-author .articles-card-content-author__image {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px;
}
.articles-card .articles-card-content .articles-card-content-bottom .articles-card-content-author .articles-card-content-author__name {
    font-size: 16px;
    font-weight: 400;
    color: #0B2038;
    margin: 0 0 6px;
    line-height: 1;
}
.articles-card .articles-card-content .articles-card-content-bottom .articles-card-content-author .articles-card-content-author__designation {
    font-size: 14px;
    font-weight: 500;
    color: var(--accent-color);
    margin: 0;
    line-height: 1;
}



.articles-card:hover .articles-card-image-layer {
    transform: translateY(-100%);
}
.articles-card:hover .articles-card-image-wrapper > .articles-card-image-link {
    opacity: 1;
    transform: translateY(0);
}
@media (max-width: 767px) {
    .articles-card .articles-card-image-wrapper {
        width: 180px;
        height: 130px;
    }
    .articles-card .articles-card-content .articles-card-content-title {
        font-size: 14px;
    }
}