@charset "UTF-8";

section#projects {
	z-index: 1000;
	padding-top: 2.5rem;
	padding-bottom: 1rem;
	/* transform: rotate3d(220, -777, -100, 385deg) scale(1.1); */

	> h2.title {
		font-size: 2.4rem;
		font-family: "Bahnschrift";
		margin: 0.1em 0 0.2em 0;
	}

	div.hotline {
		width: 100vw;
		height: 250px;
		display: inline-flex;
		gap: 15px;
		cursor: grab;

		&:active {
			cursor: grabbing;
		}

		> :is(article, div) {
			position: relative;
			min-width: 220px;
			max-width: 220px;
			width: 220px;
			height: 100%;
			overflow: hidden;
			border-radius: 0.75rem;
			filter: contrast(1) brightness(1) saturate(1);
			transition: filter 0.2s ease-out;

			&:is(:hover, :focus) {
				filter: contrast(1.2) brightness(0.8) saturate(0.6);
				transition: filter 0s;
			}

			&:active {
				filter: contrast(1.4) brightness(0.7) saturate(0.2);
				transition: filter 0s;
			}

			&:is(.pechatalka) {
				> img.background {
					filter: blur(1.5px) brightness(0.8);
				}
			}

			&:is(.understyle) {
				> img.background {
					object-position: bottom;
					filter: blur(1px) brightness(0.8);
				}
			}

			&:is(.surikov) {
				> img.background {
					object-position: bottom;
					filter: blur(0.4px) brightness(0.8);
				}
			}

			h4 {
				position: absolute;
				z-index: 50;
				justify-self: center;
				bottom: 0.4rem;
				margin: unset;
				padding: 0.4rem 1rem 0.3rem;
				font-family: "Bahnschrift";
				font-size: 1.2rem;
				font-weight: 900;
				color: #fff;
				text-shadow: 2px 2px 3px #000;
			}

			img.background {
				position: absolute;
				top: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}
}
