/* -------------------------------------------------------------------------- */
/* Global blog layout                                                         */
/* -------------------------------------------------------------------------- */

*,
*:before,
*:after {
	box-sizing: border-box;
	/* font-family: inherit; */
	max-width: 100%;
}

main {
	width: 100%;
	max-width: 42rem;
	margin: 6rem auto;
	padding: 0 1rem;
}

.layout {
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: auto 1fr auto;
	min-height: 100vh;
}

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

/* -------------------------------------------------------------------------- */
/* Individual post                                                            */
/* -------------------------------------------------------------------------- */

.post h1 {
	margin-bottom: 1rem;
}

.post .meta {
	margin-bottom: 4rem;
	font-size: 0.8rem;
}

.post img + h1 {
	margin-top: 1rem;
}

/* -------------------------------------------------------------------------- */
/* Post content                                                               */
/* -------------------------------------------------------------------------- */

.post-content .post-item {
  list-style: none;
	margin-bottom: 0.25rem;
  border: 0.25rem solid rgba(107, 114, 128, 0.25);
  border-radius: 10px;
  background-color: hsla(220, 15, 80, 0.1);
  backdrop-filter: blur(2px);
  padding: 0.75rem 1rem;

  filter: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03))
          drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08));

  transition: 
		/* color 300ms ease-in-out, */
		background-color 300ms ease-in-out,
    border-color 300ms ease-in-out;
}

.dark .post-content li {
  background-color: rgba(31, 41, 55, 0.30);
  border-color: rgba(8, 47, 73, 0.50)

}

/* -------------------------------------------------------------------------- */
/* Posts list                                                                 */
/* -------------------------------------------------------------------------- */

.posts-list {
	padding: 0;
	list-style-type: none;
}

.posts-list li {
	margin-bottom: 6rem;
}

.posts-list img + h2 {
	margin-top: 1rem;
}

.posts-list a {
	display: block;
}

/* -------------------------------------------------------------------------- */
/* Post footer / categories                                                   */
/* -------------------------------------------------------------------------- */

.post-footer__categories {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;

	padding: 0;
}

.post-footer li {
	display: inline-block;
	font-size: 0.8rem;
}

.post-footer a {
	padding: 0.5rem 0.75rem;

	background-color: var(--lightAccent);

	font-family: var(--primaryFont);
	font-weight: bold;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------- */
/* Heading anchor links                                                       */
/* -------------------------------------------------------------------------- */

.icon-link {
	position: relative;
}

.icon-link > *::before {
	content: url('/link.svg');

	position: absolute;
	top: 0;
	left: -1rem;

	width: 1rem;
	height: 1rem;

	opacity: 0.2;

	transition: opacity 200ms ease-in-out;
}

.icon-link:hover > *::before {
	opacity: 1;
}

/* -------------------------------------------------------------------------- */
/* Responsive                                                                 */
/* -------------------------------------------------------------------------- */

@media (min-width: 48rem) {
	.icon-link > *::before {
		left: -1.5rem;
	}
}