@media (min-width: 900px) {
    .BlogIndexPost--variantNormal.BlogIndexPost--hasFigure {
        grid-template-areas: "category category category date"
        "title title title authorList"
        "body body image image"
        "readMore readMore image image"
        ". . image image";
    }
}

.BlogIndexPost {
    display: grid;
    grid-template-columns: repeat(var(--columnCountMax),1fr);
    justify-items: flex-start;
    align-items: flex-start;
    gap: 16px 0;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    position: relative;
    font-family: var(--fontFamily);
}

.BlogIndexPost2 {
    display: grid;
    grid-template-columns: repeat(var(--columnCountMax),1fr);
    justify-items: flex-start;
    align-items: flex-start;
    gap: 16px 0;
    width: 100%;
    max-width: 1080px;
    margin: 100px auto 0;
    position: relative;
    font-family: var(--fontFamily);
    direction: rtl;
}

.CopyTitle {
    --titlePaddingLeft: var(--columnPaddingNormal);
    --titlePaddingRight: var(--columnPaddingMedium);
    position: relative;
    padding: 0 var(--titlePaddingRight) 0 var(--titlePaddingLeft);
    line-height: 1.6;
    color: var(--titleColor);
    letter-spacing: var(--titleLetterSpacing,.2px);
}

.CopyTitle2 {
    --titlePaddingLeft: var(--columnPaddingNormal);
    --titlePaddingRight: var(--columnPaddingMedium);
    position: relative;
    padding: 0 var(--titlePaddingLeft) 0 var(--titlePaddingRight);
    line-height: 1.6;
    color: var(--titleColor);
    letter-spacing: var(--titleLetterSpacing,.2px);
}

.BlogIndexPost__category {
    grid-area: category;
    font-size: 18px;
    font-weight: 600;
    color: #635bff;
}

.BlogIndexPost__title.CopyTitle {
    --titlePaddingRight: var(--columnPaddingLarge);
    grid-area: title;
    font: var(--fontWeightBold) 38px/48px var(--fontFamily);
    letter-spacing: -.2px;
    color: var(--titleColor);
    font-size: 38px;
    font-weight: 600;
}

.BlogIndexPost__date {
    grid-area: date;
}

@media (min-width: 750px) {
    .BlogIndexPost--variantNormal .BlogIndexPost__figure.BlogImageCard.Card {
        --cardShadow: 0 30px 60px -12px rgba(50,50,93,0.25),0 18px 36px -18px rgba(0,0,0,0.3);
    }
}

.Card {
    --cardBleedRightNormal: var(--columnWidth);
    --cardBleedBottomNormal: 16px;
    --cardShadow: none;
    --cardShadowMargin: 0;
    --cardMinHeight: 72px;
    position: relative;
    min-width: 100px;
    min-height: var(--cardMinHeight);
    max-width: var(--cardMaxWidth,none);
    margin-right: calc(var(--cardBleedRight, 0)*-1);
    margin-bottom: calc(var(--cardBleedBottom, 0)*-1);
    border-radius: 8px;
    background: var(--cardBackground);
    box-shadow: var(--cardShadow);
    overflow: hidden;
}

.BlogIndexPost__figure.BlogImageCard.Card {
    grid-area: image;
}

.BlogIndexPost__body {
    grid-area: body;
    display: grid;
    gap: 1em 0;
    padding: 0 var(--columnPaddingLarge) 0 var(--columnPaddingNormal);
    letter-spacing: .2px;
    color: var(--textColor);
    font-size: 1rem;
    line-height: 1.6;
}

.BlogIndexPost__body2 {
    grid-area: body;
    display: grid;
    gap: 1em 0;
    padding: 0 var(--columnPaddingNormal) 0 var(--columnPaddingLarge);
    letter-spacing: .2px;
    color: var(--textColor);
    font-size: 1rem;
    line-height: 1.6;
}

.BlogIndexPost__readMoreLink.Link {
    grid-area: readMore;
    font-size: 16px;
    letter-spacing: .2px;
    margin-left: 16px;
}

.CtaButton.variant--Button:active {
    background-color: #0a2540;
}

.CtaButton.variant--Button:hover {
    background-color: #0a2540;
}