.content.about {
	display: flex;
	flex-direction: column;
	gap: 32px;

	color: white;
	padding: 96px var(--page-padding);
	max-height: 100vh;
	overflow-y: auto;
	overflow-x: hidden;

	--page-padding: 48px;
}

h1, p, ul, li{
	mix-blend-mode: difference;
	margin: 0;
}
p.desc, ul.desc{
	opacity: 0.5;
	&, & *{
		font-size: 14px;
		font-weight: 300;
	}
}

h1{
	font-size: 6.4vw;
	text-align: justify;
}
p, li{
	font-size: 14px;
	max-width: 600px;
	line-height: 210%;
	text-align: justify;
}
ul{
	padding: 0;

	li{
		margin-left: 18px;
	}
}

.wrap-on-960{
	@media (min-width: 960px) {
		gap: 64px;
		width: 100%;
		& > div{
			flex: 1 1 50%;
			max-width: 600px;
		}
	}
	@media (max-width: 960px) {
		flex-direction: column;
		gap: 32px;
	}
}
.image-wrapper{
	display: flex;
	gap: 24px;
	height: 240px;
	width: 100vw;
	margin-left: calc(var(--page-padding) * -1);

	a{
		height: fit-content;

		img{
			width: 100%;
			object-fit: cover;
		}
		&:nth-child(1){
			width: 60vw;
			z-index: -1;
			transform: translateY(-180px);
		}
		&:nth-child(2){
			width: 50vw;
			transform: translateY(-30px);
		}
	}
}

.image-col-wrapper{
	display: flex;
	gap: 20px;
}

.image-col{
	display: flex;
	flex-direction: column;
	gap: 1.39%;

	img{
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	&:first-child{
		width: 53.33%;
	}
	&:last-child{
		width: 45.28%;
	}
}

a.cursor-hover.flickr{
	position: relative !important;

	&::after{
		content: 'открыть на flickr.com';
		position: absolute;
		top: 4px;
		left: 4px;
		color: white;
		font-size: 12px;
		font-weight: 300;
		z-index: 1;
		mix-blend-mode: difference;
		pointer-events: none;

		transform: translateY(-10px) translateX(-10px) scale(0.6);
		transform-origin: top left;
		opacity: 0;
		transition: opacity 0.2s, transform 0.2s;
	}

	&:hover::after{
		opacity: 1;
		transform: translateY(0) translateX(0) scale(1);
	}
}