.header-and-main {
	max-width: 1600px;
}

.article-title {
	
	font-size: 1.25rem;
	line-height: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	
	text-transform: uppercase;
	
	color:ghostwhite;
}

.project-section {
	padding: 1.5rem;
	border-radius: 0.375rem;
	transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
}

.project-section:hover {
	background-color: var(--section-shadow-blue);
	box-shadow: 1px;
}

.project-title-and-year {
	display:flex;
}

.project-year {
	margin-left: 1rem;
}

.tags-list {
	margin-top: 0;
	margin-bottom: 1rem;
}

.galery {
	display: flex;
	flex-wrap: wrap;
	margin-top: 1rem;
}

section:hover .galery {
	max-height: 150rem;
}

.galery img {
	display: block;
	vertical-align: middle;
	max-width: 100%;
	height: 4rem;
	margin-right: 0.5rem;
	border-radius: 0.25rem;
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 0.3s;
}

section:hover img {
	height: 12rem;
}

.section-footer {
	margin-top: 1rem;
}

@media (min-width: 1024px) {	
	.article-header {
		position: sticky;
		top: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		max-height: 100vh;
		width: 30%;
		padding-top: 6rem;
		padding-bottom: 3rem;
	}
	
	main {
		width: 60%;
	}
	
	section {
		margin-bottom: 6rem;
	}
}