.main-container{
    width: 100%;
    height: fit-content;
    justify-content: center;
    display: flex;
    flex-direction: column;
    padding-top: 50px;
    margin-bottom: 50px;
}
.grid-container{
    
    width: 100%;
    display: grid;
    
    justify-items: center;
    /* grid-template-columns: repeat(4,1fr); */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-row-gap: 20px;
     /* Does nothing on its own for layout, but we keep it */
    transition: padding 0.3s ease, gap 0.3s ease;
    /* make items in each row have the same height */
    grid-auto-rows: 1fr;
}
/* The trick: animate the children */
.grid-container > * {
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.item-container{
    background-color: var(--lightGray-color);
    height: auto;
    border-radius: 15px;
    direction: rtl;
    max-width: 250px;
    cursor: pointer;
    justify-content: center;
    display: flex;
    flex-direction: column;
}
.item-container img{
    width: auto;
    max-height: 240px;
    margin: 20px;
    justify-content: center;


}
.info-container{
    
}
.info-container > p{
    color: black;
    margin: 25px;
}
.blog-topic{
    font-weight: bold;
    font-size: x-large;
}
.blog-description{
    white-space: normal;
    word-break: break-all;
    font-size: medium;
}
.date-container p{
    color: var(--gray-color);
    margin: 20px;
    font-size: small;
    text-align: left;
}
.button-container{
    display: flex;
    justify-content: center;
    margin-top: 50px;
}
.page-button{
    background-color: var(--onPrimary-color);
    color: white;
    font-size: large;
    padding: 10px;
    padding-inline: 50px;
    border: none;
    border-radius: 10px;
    margin-inline: 50px;
    cursor: pointer;
}