:root{
    --cover-color: var(--color-accent);
}

main{
    max-width: 50em;
    margin: 8em auto;
    padding: 1em;
}

#feed-container *{
    text-decoration: none;
}

#feed-container li{
    border-bottom: 0.1em solid var(--color-secondary);
}

#feed-container li:last-child{
    border-bottom: none;
}

.post{
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 2em;
    padding: 1em;
}

.post::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
    background-image: linear-gradient(
        to left, color-mix(in srgb, var(--cover-color) 30%, transparent) 0%, transparent 100%
    );

    opacity: 0;
    transition: all 200ms ease;
}

.post:hover::before {
    opacity: 1;
}

.post > div{
    display: flex;
    flex-direction: column;
}

.post img{
    width: 10em;
    max-width: 25vw;
    height: auto;
    max-height: 25em;
    object-fit: contain;
    object-position: top;
}

@media only screen and (max-width: 450px) {
    h2{
        font-size: 1.2em;
    }

    .post{
        gap: 1em;
    }
}

.meta{
    font-size: 0.8rem;
    margin: 0 0 0.75em 0;
    text-wrap: pretty;
}