:root {
    --blue-primary: #0B357B;
}

.post-loop {
    display: grid;
    column-gap: 25px;
    row-gap: 40px;
}

.post-loop[data-post-columns="2"] {
    grid-template-columns: repeat(2, 1fr);
}

@media only screen and (max-width: 768px){
    .post-loop[data-post-columns="2"] {
        grid-template-columns: repeat(1, 1fr);
    }
}

.post-loop[data-post-columns="3"] {
    grid-template-columns: repeat(3, 1fr);
}

.post-loop[data-post-columns="4"] {
    grid-template-columns: repeat(4, 1fr);
}

.post-loop[data-post-columns="2"] img {
    aspect-ratio: 16/9;
    object-fit: cover;
    width: 100%;
} 

.post-details-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

.post-loop h4 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 34px;
    font-weight: bold;
    letter-spacing: .25px;
    margin: 0;
}

.post-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: var(--blue-primary);
    text-decoration: none !important;
    border: 2px solid var(--blue-primary);
    padding: 8px 16px;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1.25px;
    border-radius: 80px;
    transition: .3s ease-in-out;
}

.post-button:hover {
    background-color: var(--blue-primary);
    color: #fff;
}

.post-button svg {
    fill: var(--blue-primary);
    transition: .3s ease-in-out;
}

.post-button:hover svg {
    fill: #fff;
}