@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');

img {
    max-width: 100%;
    width    : 100%;
}

.saraljo-post-wrapepr {
    display              : grid;
    grid-template-columns: repeat(4, 1fr);
    gap                  : 50px;
}

.saraljo-feature-image {
    position: relative;
    z-index : 1;
}

.saraljo-post-date-wrapper {
    position       : absolute;
    text-align     : center;
    top            : 0;
    left           : 0;
    background     : #191917;
    padding        : 10px;
    font-family    : "Space Grotesk", serif;
    min-width      : 50px;
    text-decoration: none;
    font-weight    : 400;
    z-index        : 1;
    color          : #fff;
    transition: background-color 0.3s ease;
}

.saraljo-post-date-wrapper:hover {
    color     : #fff;
    background: #f94e41;
}

.saraljo-post-date {
    font-size     : 40px;
    line-height   : 1em;
    letter-spacing: -.025em;
    word-wrap     : break-word;
}

.saraljo-post-month {
    font-size     : 15px;
    text-transform: uppercase;
}

.saraljo-feature-image {
    overflow     : hidden;
    margin-bottom: 15px;
}

.saraljo-feature-image a {
    display: block;
}

.saraljo-feature-image a img {
    height    : 100%;
    width     : 100%;
    object-fit: cover;
    transform : scale(1.1);
    transition: transform 1s cubic-bezier(.33, .02, 0, .93);
}

.saraljo-post-card:hover img {
    transform: scale(1.1) translateX(4%);
}

.saraljo-post-content p,
.saraljo-post-content h3 {
    margin: 0;
}

.saraljo-post-categories {
    display    : flex;
    align-items: center;
    gap        : 15px;
}

.saraljo-post-categories a {
    text-transform : uppercase;
    font-size      : 15px;
    line-height    : 1.467em;
    letter-spacing : 0;
    color          : #777;
    text-decoration: none;
    font-family    : "Space Grotesk", serif;
    position       : relative;
    transition     : color 1s cubic-bezier(.33, .02, 0, .93);
    font-weight    : 500;
}

.saraljo-post-categories a:hover {
    color: #191917;
}

.saraljo-post-categories a:not(:last-child)::before {
    position : absolute;
    content  : ',';
    top      : -3px;
    left     : 102%;
    font-size: 24px;
    transform: rotate(15deg);
}

.saraljo-post-content {
    display       : flex;
    flex-direction: column;
    gap           : 10px;
}

.saraljo-post-title a {
    background-image   : linear-gradient(to top, rgb(110, 110, 110) 1px, transparent 0px);
    background-repeat  : no-repeat;
    background-size    : 0px 100%;
    background-position: 100% -2px;
    transition         : background-size 0.8s cubic-bezier(0.33, 0.02, 0, 0.93);

    color          : #191917;
    font-size      : 28px;
    font-weight    : 400;
    font-family    : "Space Grotesk", serif;
    line-height    : 1.143em;
    letter-spacing : -.025em;
    word-wrap      : break-word;
    text-decoration: none;
}

.saraljo-post-title a:hover {
    background-size      : 100% 100%;
    background-position-x: 0;
}

@media screen and (max-width:1024px) {
    .saraljo-post-wrapepr {
        grid-template-columns: repeat(3, 1fr);
        gap                  : 30px;
    }

    .saraljo-post-date {
        font-size: 34px;
    }
}

@media screen and (max-width:991px) {
    .saraljo-post-wrapepr {
        grid-template-columns: repeat(3, 1fr);
        gap                  : 30px;
    }

    .saraljo-post-title a {
        font-size: 22px;
    }

    .saraljo-post-date {
        font-size: 24px;
    }
}

@media screen and (max-width:880px) {
    .saraljo-post-wrapepr {
        grid-template-columns: repeat(2, 1fr);
        gap                  : 25px;
    }
}

@media screen and (max-width:680px) {
    .saraljo-post-wrapepr {
        grid-template-columns: repeat(1, 1fr);
        gap                  : 20px;
    }
}