.page {
	max-width: 100vw;
}

aside {
	position: relative;

	> div {
		background: #f8f9fa;
		padding: 24px;

		position: sticky;
   		top: 0;
	}

	img {
		width: 160px;
		height: 160px;
		margin: 0 auto;
		display: block;
		border-radius: 999px;

		border: 6px solid rgb(255 107 157 / 0.2);
	}

	h1, p {
		text-align: center;
	}

	h1 {
		font-size: 30px;
		line-height: 1;

		color: #2c3e50;

		margin-top: 20px;
	}

	h2 {
		color: #2c3e50;

		font-size: 20px;
		line-height: 1;

		margin-top: 40px;

		+ p {
			text-align: left;
			font-size: 14px;
		}
	}

	p {

		small {
			font-size: 14px;
			line-height: 1;
			color: #6b7280;
		}
	}
}

@media screen and (min-width: 1024px) {
	aside > div {
		min-height: 100vh;
	}
}

.links {
	list-style: none;
	padding-left: 0;

	display: flex;
	flex-flow: column;
	gap: 12px;

	margin-top: 24px;

	a {
		text-decoration: none;
		padding: 8px 12px;

		border-radius: 6px;

		display: flex;
		align-items: center;
		gap: 12px;

		color: #fff;
	}

	.instagram {
		background-image: linear-gradient(to right, rgb(168, 85, 247), rgb(236, 72, 153));
	}
	
	.patreon {
		background-image: linear-gradient(to right, rgb(251, 146, 60), rgb(239, 68, 68));
	}
}

main {
	> div {
		padding: 24px 24px 0 24px;
	}

	ul {
		list-style: none;
		padding-left: 0;
		gap: 24px 0;
	}
}

.post-item {
	display: flex;
	flex-flow: column;

	border: 1px solid #c3d3e2;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);

	text-decoration: none;

	transition: all 0.1s ease-in;

	h3, p {
		padding: 10px;
		margin: 0;
	}

	h3 {
		color: #2c3e50;

		font-size: 18px;
		line-height: 1.2;
	}

	p {
		padding-bottom: 0;
	}
}

.post-item:hover {
	transform: scale(1.1);

	img {
		transform: scale(1.1);
	}
}

.post-item__images {
	display: flex;
	flex-flow: row;
	overflow: hidden;

	img {
		display: block;
		width: 50%;
		flex: 0 0 50%;
		height: 370px;

		object-fit: cover;
		object-position: center;
		transition: all 0.1s ease-in;
	}
}

.tag {
    padding: 3px 10px;
    display: inline-block;
    margin-bottom: -4px;
    background: black;
    color: white;
    border-radius: 6px;
    font-size: 12px;
}

.tag--photos {
    background-color: #9ce6e7;
    color: #149393;
}

.tag--comics {
    background-color: #f0b5f0;
    color: #830c83;
}