.blog__page {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.blog__page__header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--main-button-border-color);
}

.blog__page ul {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 4rem;
    margin-top: 1.5rem;
}

.blog__item {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: max-content 1fr;
    grid-template-areas: 
    "date" 
    "desc";
    gap: 1rem;
    padding: 0;
}

.blog__date {
    grid-area: date;
    font-size: var(--md-text);
    color: var(--main-text-color-description);
    width: 100%;
    padding-bottom: 1rem;

}

.blog__desc__container {
    grid-area: desc;

    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--main-text-color);
    text-decoration: none;
    position: relative;
}

.blog__desc__container::before {
    content: "";
    position: absolute;
    top: -24px;
    left: -24px;
    right: -24px;
    bottom: -24px;
    padding: -1.5rem;
    border-radius: 1rem;
    z-index: -1;
    transition-duration: 0.2s;
}

.blog__desc__container:hover::before {
    background-color: var(--main-button-hover-background-color);
}

.blog__desc__container h3 {
    font-size: var(--lg-text);
    font-weight: 500;
    line-height: 1.5;
}

.blog__desc__container p {
    font-size: var(--md-text);
    color: var(--main-text-color-description);
}

.blog__desc__container div {
    color: var(--main-carousel-circle-active-color);
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
    align-items: center;
    margin-top: 0.5rem;
}

.blog__desc__container div > span {
    font-size: var(--md-text);
}

.blog__desc__container div > svg {
    width: 1rem;
    height: 1rem;
}

@media (min-width: 1024px) {

    .blog__page__header {
        border: none;
        padding: 0;
    }

    .blog__page ul {
        padding-left: 1.5rem;
        border-left: 1px solid var(--main-button-border-color);
    }

    .blog__item {
        grid-template-columns: 14ch 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: 
        "date desc";
        gap: 0 2.5rem;
    }

    .blog__date {
        grid-column-start: 1;
        grid-column-end: 2;
    }

    .blog__desc__container {
        grid-column-start: 2;
        grid-column-end: 3;
    }

}