.blog__date{
    display: flex;
    align-items: center;
    gap: 8px;
}

.blog__feature--image{
    width: 100%;
    aspect-ratio: 2;
    object-fit: contain;
    position: relative;
}

.flex__container{
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.blog__post--card-horizontal a{
    display: flex;
    gap: 16px;
}


.blogFlex{
    display: flex;
    gap:8px;
}
.blog__post--card-horizontal .post__image--wrapper{ max-width: 130px; }

.blog__post--card-horizontal {
    border-bottom: 1px solid var(--anno);
    margin-bottom: 16px;
    padding-bottom: 16px;
}

.blog__post--card-horizontal a{
    display: flex;
    gap: 16px;
}

.blog__post--card-vertical .post__image--wrapper{ max-width: 130px; }

.blog__post--card-vertical {
    border-bottom: 1px solid var(--anno);
    margin-bottom: 16px;
    padding-bottom: 16px;
}


.blogCard--vertical{
box-shadow: 0 -6px 24px rgba(10, 10, 10, 0.09);
border: 2px solid var(--border);
border-radius: 0.25em;
transition: 0.3s all ease-in;
}

.blogCard--vertical_content{
    padding: 8px 16px;
    border-top: 2px solid var(--border);
}

.postDesctiption{
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* transition: max-height 0.3s ease; */
    word-break: break-word;
}

.wd-40{
    width: 100%;
}

.wd-50{
    width: 100%;
}

.wd-60{
    width: 100%;
}

.pb-m{
    padding-bottom: 12px;

}

.blogHead{
    margin: 12px 12px;
    padding: 0px 0px;
    border-bottom: 2px solid var(--anno);
}

.blogHeader{
    display: flex;
    gap: 12px;
}
.tag{
    margin-right: 16px;
}
.blog__page--header a{
    display: flex;
    gap: 24px;
    flex-direction: column;
    margin-bottom: 16px;
}

.blog__page--header .post__image--wrapper{ max-width: 450px; }

.blog__page--headerl {
    border-bottom: 2px solid var(--anno);
    margin-bottom: 12px;
    padding-bottom: 12px;
}


.blogContent{
    display: flex;
    flex-direction: column;
    margin: 12px 12px;
    padding: 0px 0px;
}

.post-tags {
    display: flex;
    gap: 8px; /* Razmak između tagova */
    flex-wrap: wrap; /* Omogućava da tagovi idu u novi red ako nema dovoljno prostora */
  }
  
  .post-tags .tag {
    background-color: #f2f2f2;
    color: #333;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
  }

 .blogTitle {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* transition: max-height 0.3s ease; */
    word-break: break-word;
 }

 .blogSection .featured_cardtext{  
    text-align: left;
    color: var(--grey);
    min-height: 0px;
}


.post__image--wrapper h1 {
font-size: 16px;
}

@media screen and (min-width: 1025px) {
   
    .flex__container{
        display: flex;
        flex-direction: row;
        gap: 48px;
        align-items: center;
    }

    .flex__container--cours{
        width: 40%;
    }
    .flex__container--posts{
 
    }
    .blog__post--card-horizontal a{
        gap: 24px;
    }
    .blogContent{
        display: flex;
        flex-direction: column;
        margin: 28px 64px;
        padding: 28px 96px;
    }
    .blog__page--headerl {
        border-bottom: 2px solid var(--anno);
        margin-bottom: 16px;
        padding-bottom: 48px;
    }
    .blogHeader{
        display: flex;
        gap: 64px;
    }

    .blogHead{
        margin: 28px 64px;
        padding: 28px 96px;
        border-bottom: 2px solid var(--anno);
    }
    .blog__page--header a{
        display: flex;
        gap: 24px;
        flex-direction: row;
    }

    .blog__post--card-horizontal{
        margin-bottom: 0;
    }
}