.blog-card .details {
    display: grid;
    grid-template-columns: 1fr minmax(25%, 10rem);
    gap: var(--pico-spacing);
}

@media (max-width: 30rem) {
    .blog-card .details {
        grid-template-columns: 1fr;
    }
}

.blog-card .details * {
    color: rgb(194, 199, 208);
}

.blog-card .details > .align-details {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.blog-card .details > .align-details .read-blog {
    color: var(--pico-color);
    margin: var(--pico-spacing) 0 0 0;
}

.blog-card .title-img {
    height: 100%;
    width: 100%;
    background-size: cover;
    padding-top: 80%;
    border-radius: var(--pico-spacing);
}