.blog-filter {

    display: flex;

    margin-inline: auto;

    max-width: -moz-fit-content;

    max-width: fit-content;

    justify-content: flex-start;

    align-items: center;

    gap: 20px;

    overflow-y: auto;

}



.blog-filter-btn {

    padding: 9px 20px;

    font-size: 16px;

    font-weight: 700;

    line-height: 1.5em;

    color: var(--clr-d-gray);

    letter-spacing: 0.03em;

    background-color: rgba(255, 255, 255, 0.7);

    border: 1px solid var(--acc-l-line-green);

    border-radius: 13px;

    transition: var(--def-transition);

    cursor: pointer;

}



.blog-filter-btn.active {

    color: var(--clr-white);

    background-color: var(--acc-green);

    border-color: transparent;

}



.blog-filter-btn:not(.active):hover,

.blog-filter-btn:not(.active):focus {

    color: var(--acc-d-green);

    background-color: var(--acc-l-green);

    border-color: transparent;

}



.blog-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: var(--tb-val-m) 20px;

}



@supports selector(*:focus-visible) {

    .blog-filter-btn:not(.active):focus {

        color: var(--clr-d-gray);

        background-color: rgba(255, 255, 255, 0.7);

        border-color: var(--acc-l-line-green);

    }



    .blog-filter-btn:not(.active):hover,

    .blog-filter-btn:not(.active):focus-visible {

        color: var(--acc-d-green);

        background-color: var(--acc-l-green);

        border-color: transparent;

    }

}



@media screen and (max-width: 1024px) {

    .blog-filter {

        margin-inline: calc(var(--p-inline) * -1);

        padding-inline: var(--p-inline);

        padding-bottom: 10px;

        gap: 16px;

    }



    .blog-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}



@media screen and (max-width: 552px) {

    .blog-grid {

        grid-template-columns: 1fr;

    }

}



.blog-card {

    display: flex;

    position: relative;

    flex-flow: column;

}



.blog-card:hover .blog-card-media-img,

.blog-card:focus-within .blog-card-media-img {

    transform: scale(1.2);

}



.blog-card:hover .blog-card-title,

.blog-card:focus-within .blog-card-title {

    color: var(--acc-green);

}



.blog-card-link {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: var(--zi-2);

}



.blog-card-media {

    position: relative;

    border-radius: 20px;

    overflow: hidden;

}



.blog-card-media:empty {

    background-image: url("../images/content/blog/blog-placeholder.png");

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

    border: 1px solid var(--acc-line-green);

}



.blog-card-media:before {

    content: "";

    display: block;

    padding-bottom: 59.59%;

}



.blog-card-media-img {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    -o-object-fit: cover;

    object-fit: cover;

    -o-object-position: center center;

    object-position: center center;

    z-index: var(--zi-bg);

    border-radius: inherit;

    transition: var(--def-transition);

}



.blog-card-tag {

    display: block;

    position: absolute;

    padding: 8px 12px;

    top: 20px;

    left: 20px;

    font-size: 16px;

    font-weight: 700;

    line-height: 1.5em;

    border-radius: 12px;

    z-index: var(--zi-1);

}



.blog-card-tag.blue {

    color: var(--label-blue);

    background-color: var(--label-l-blue);

}



.blog-card-tag.green {

    color: var(--label-green);

    background-color: var(--label-l-green);

}



.blog-card-tag.purple {

    color: var(--label-purple);

    background-color: var(--lable-l-purple);

}



.blog-card-title {

    margin-top: var(--tb-val-xs);

    color: var(--clr-black);

    transition: var(--def-transition);

}



.blog-card-date {

    display: block;

    margin-top: auto;

    padding-top: 20px;

    font-size: 16px;

    font-weight: 400;

    line-height: 1.5em;

    color: var(--clr-d-gray);

}



@media screen and (max-width: 1440px) {

    .blog-card-tag {

        top: 10px;

        left: 10px;

        font-size: 14px;

    }



    .blog-card-date {

        padding-top: 10px;

        font-size: 14px;

    }

}



@media screen and (max-width: 1024px) {

    .blog-card-tag {

        padding: 4px 8px;

        top: 12px;

        left: 12px;

        border-radius: 8px;

    }



    .blog-card-date {

        padding-top: 8px;

        font-size: 12px;

    }



    .page-numbers {

        display: none;

    }



    .next,

    .prev {

        display: block;

        flex: 0 0 58px;

    }

    .prev {

        order: 1;

    }

    .pagination-val {

        order: 2;

    }

    .next {

        order: 3;

    }



    .pagination {

        width: 100%;

        padding-inline: 20px;

        padding-top: 16px;

    }



    .pagination .prev {

        margin-right: 0;

    }

    .pagination .next {

        margin-left: 0;

    }

}



@media screen and (max-width: 552px) {

    .pagination {

        padding-inline: 7px;

    }

}