.forum {
    --background-colour: var(--colour-orange);

    --icon-star: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzIgMzIiIGZpbGw9ImN1cnJlbnRDb2xvciIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0xNiAyLTQuNTUgOS4yMi0xMC4xNyAxLjQ3IDcuMzYgNy4xOEw2LjkgMzBsOS4xLTQuNzhMMjUuMSAzMGwtMS43NC0xMC4xMyA3LjM2LTcuMTctMTAuMTctMS40OHoiLz48L3N2Zz4=');
    .posts {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
        grid-auto-rows: auto auto auto;
        gap: 1rem;
        margin-block: 1rem;
    }

    article {
        display: grid;
        padding: 0.5rem;
        border-radius: 0.5rem;
        background-color: rgba(from var(--background-colour) r g b / 0.1);
        grid-template-columns: subgrid;
        grid-template-rows: subgrid;
        gap: 0.5rem;
        grid-row-end: span 3;
        &.unread {
            h4 {

            &::after {
                display: block;
                position: absolute;

                right: 0.5rem;
                top: calc(50% - 0.5rem);
                width: 1rem;
                height: 1rem;
                border-radius: 50%;
                content: '';
                background-color: var(--colour-yellow);
                mask-image: var(--icon-star);
                mask-size: contain;
                mask-position: center;
                mask-repeat: no-repeat;
            }
            }
        }
    }

    h4 {
        font-size: var(--font-size-15625);
        font-weight: bold;
        margin: 0;
        border-radius: 0.5rem;
        background-color: var(--background-colour);
        padding-inline: 0.5rem;
        position: relative;

        a:any-link {
            text-decoration: none;
            display: block;
        }
    }

    .meta {
        font-size: var(--font-size-1);
        margin: 0 0 0.2rem;
    }

}

.button:any-link {
    text-transform: capitalize;
    padding-inline: 1rem;
}