#all-blogs-container .wrapper {
    padding-top: 6rem;
}

#latest-casestudies-container,
#latest-blogs-container,
#related-blogs-container,
#all-blogs-container,
#featured-case-study {
    overflow: hidden;
}

#latest-casestudies-container #casestudy-cards-wrapper,
#latest-blogs-container .blog-cards-wrapper,
#related-blogs-container .blog-cards-wrapper,
#all-blogs-container .blog-cards-wrapper,
.case-study-card-container .blog-cards-wrapper {
    display: grid;
    gap: 2.5rem 2rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 1560px;
    margin: 0 auto;
    padding: 1rem 0 3rem;
}

#featured-case-study .blog-cards-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 1060px;
}

#featured-case-study.three-cards .blog-cards-wrapper {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 1560px;
}

#featured-case-study.one-card .blog-cards-wrapper {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    max-width: 530px;
}

#all-blogs-container .blog-cards-wrapper {
    padding: 3rem 0 5rem;
}

.blog-card .blog-preview-wrapper {
    display: block;
    border: 1px solid var(--oxford-blue-a10);
    border-radius: 15px;
    overflow: hidden;
}

.blog-card .blog-preview {
    background: no-repeat top/contain rgba(17, 75, 138, 0.035);
    width: 100%;
    /* aspect-ratio: 3/2; */
    aspect-ratio: 16/9;
    border-radius: inherit;
    transition: transform 0.4s ease-in-out;
}

.blog-card:hover .blog-preview {
    transform: scale(1.075);
}

.blog-card .blog-preview::after {
    content: "";
    background: var(--white-a30);
    opacity: 1;
    pointer-events: none;
    transition: all 0.4s linear;
    position: absolute;
    top: 0;
    left: 50%;
    right: 51%;
    bottom: 0;
}

.blog-card:hover .blog-preview::after {
    opacity: 0;
    left: 0;
    right: 0;
}

.blog-card .blog-contents {
    background-color: var(--white);
    margin-top: -40px;
    margin-left: 30px;
    padding: 30px 40px 35px;
    border-radius: 10px 0 10px 10px;
    box-shadow: 0 0 20px 6px rgba(0, 0, 0, 0.025);
    transition: all 300ms ease;
    position: relative;
}

.blog-card .blog-contents:not(.animate) {
    animation: faded-slide-left-in 1s both 0.2s;
}

.blog-card:hover .blog-contents {
    box-shadow: 0 10px 60px var(--black-a10);
}

.blog-card .blog-contents .blog-posted-by {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.blog-posted-by .blog-date {
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    background-color: var(--celtic-blue);
    color: var(--white);
    padding: 5px 20px;
    border-radius: 10px;
}

.blog-posted-by .blog-author {
    font-size: 14px;
    color: var(--battleship-gray);
    margin-left: 5px;
}

.blog-card .blog-contents .blog-title {
    font-size: 22px;
    font-weight: 800;
    margin-top: 15px;
    margin-bottom: 7px;
}

.blog-card .blog-contents .blog-title a {
    color: inherit;
}

.blog-card .blog-contents .blog-title a:hover {
    color: var(--polynesian-blue);
}

.blog-card .blog-contents .blog-short-text {
    font-size: 15px;
    font-weight: 500;
    color: var(--black-a60);
    margin-bottom: 15px;

    /* - Vertical Truncate (3 lines) - */
    line-height: 28px;
    max-height: calc(28px * 3);
    -webkit-box-orient: vertical;
    display: -webkit-box;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.blog-card .blog-contents .blog-read-more {
    font-size: 12px;
    font-weight: 700;
    line-height: 25px;
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
    color: var(--polynesian-blue);
    padding-left: 28px;
    text-transform: uppercase;
    transition: padding-left 200ms linear, color 200ms linear;
    position: relative;
}

.blog-card .blog-contents .blog-read-more:hover {
    color: var(--bleu-de-france);
    padding-left: 0px;
}


.blog-read-more .right-arrow {
    transition: opacity 100ms linear;
    position: absolute;
    left: 0;
}

.blog-read-more:hover .right-arrow {
    opacity: 0;
}

#latest-blogs-container+footer {
    margin-top: 8rem;
}

@media (min-width: 2000px) {
    .blog-posted-by .blog-date {
        font-size: calc(12px * 1.25);
        line-height: calc(20px * 1.25);
    }

    .blog-posted-by .blog-author {
        font-size: calc(14px * 1.25);
    }

    .blog-card .blog-contents .blog-title {
        font-size: calc(22px * 1.25);
        line-height: calc(1.2em * 1.25);
    }

    .blog-card .blog-contents .blog-short-text {
        font-size: calc(15px * 1.25);
        line-height: calc(28px * 1.25);
        max-height: calc((28px * 1.25) * 3);
    }

    .blog-card .blog-contents .blog-read-more {
        font-size: calc(12px * 1.25);
        line-height: calc(25px * 1.25);
    }
}

@media (max-width: 500px) or ((min-width: 1081px) and (max-width: 1200px)) {
    .blog-card .blog-contents {
        margin-top: -57px;
        margin-left: 24px;
        padding: 24px 32px 28px;
    }

    @media (max-width: 500px) {
        .blog-card .blog-contents {
            margin-top: -40px;
        }

        .blog-posted-by .blog-date {
            font-size: calc(12px * 0.9);
            line-height: calc(20px * 0.9);
        }

        .blog-posted-by .blog-author {
            font-size: calc(14px * 0.9);
        }

        .blog-card .blog-contents .blog-title {
            font-size: calc(22px * 0.9);
            line-height: calc(1.2em * 0.9);
        }

        .blog-card .blog-contents .blog-short-text {
            font-size: calc(15px * 0.9);
            line-height: calc(28px * 0.9);
            max-height: calc((28px * 0.9) * 3);
        }

        .blog-card .blog-contents .blog-read-more {
            font-size: calc(12px * 0.9);
            line-height: calc(25px * 0.9);
        }
    }

    @media (max-width: 300px) {
        .blog-card .blog-contents {
            margin-left: 12px;
            margin-right: 12px;
            padding-right: 24px;
            padding-left: 24px;
            border-top-right-radius: 10px;
        }
    }
}

@media (max-width: 1080px) {

    #latest-casestudies-container #casestudy-cards-wrapper,
    #latest-blogs-container .blog-cards-wrapper,
    #related-blogs-container .blog-cards-wrapper,
    #all-blogs-container .blog-cards-wrapper {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    @media (min-width: 821px) {

        #latest-casestudies-container #casestudy-cards-wrapper,
        #latest-blogs-container .blog-cards-wrapper,
        #related-blogs-container .blog-cards-wrapper,
        #all-blogs-container .blog-cards-wrapper {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
}

@media (max-width: 820px) {
    #featured-case-study .blog-cards-wrapper {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    #featured-case-study.three-cards .blog-cards-wrapper {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

@media (min-width: 821px) and (max-width: 1080px) {
    #featured-case-study.three-cards .blog-cards-wrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 641px) {
    #all-blogs-container .blog-cards-wrapper {
        padding-top: 5rem;
    }
}