@layer browser {
	.posts {
		& ul {
			display: grid;
			gap: 4rem;

			& li {
				padding: 0;
			}
		}
	}
	.post {
		display: grid;
		grid-template-areas:
			"avatar account date"
			"content  content content"
			"categories categories url"
			"categories categories action"
		;
		grid-template-columns: min-content 1fr 1fr;
		& .post__avatar {
			grid-area: avatar;
			background: var(--color-background-aside);
			box-shadow:
				-20px 22px 0 -16px var(--color-primary),
				calc(1rem - 10px) -0.25rem 0 1rem var(--color-background-aside)
			;
			display: flex;
			align-items: end;
		}

		& .post__account {
			grid-area: account;
			background: var(--color-background-aside);

			overflow: hidden;
			max-width: 25ch;
			display: flex;
			align-items: center;
			align-self: stretch;
			margin: 0;
			padding: 0 0.5rem;
			& span {
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
		}

		& .post__content {
			grid-area: content;
			overflow:hidden;
			width: 100%;
			/* add alpha */
			background: oklch(from var(--color-background-focus) l c h / calc(alpha - 0.4));
			display: grid;
			gap: 0.5rem;
			padding: 1rem;
			position: relative;
			& p {
			/* Hyphenation */
				hyphens: auto;
				margin: 0;
			}

			& p > span:has(a) {
				display: inline-flex;
			}
			& a {
				display: inline-block;
				max-width: 25ch;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				padding: 0;
				text-decoration-style: dotted;
				vertical-align: bottom;
			}

			&:after {
				content: "";
				width: 2rem;
				height: 2px;
				background: var(--color-primary);
				position: absolute;
				bottom: 0;
				right:0;
			}
		}
		& .post__categories {
			grid-area: categories;
			padding: 0.25rem 0.5rem;
		}
		& .post__date {
			grid-area: date;
			align-self: end;
			padding: 0.25rem;
			display:flex;
			justify-content: end;
			align-content: end;
		}
		& .post__url {
			grid-area: url;
			max-width: 100%;
			overflow: hidden;
			text-align: right;
			padding: 0.25rem 0.5rem 0;
			font-size: 1rem;
			& a {
				display: block;
				max-width: 100%;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}
		}

		& .post__action {
			grid-area: action;
			text-align: right;
			padding: 0 0.5rem 0.25rem;
			font-size: 1rem;
		}

	}
}