.projects {
	&__wrapper {
		display: grid;
		grid-gap: 2rem;
		grid-template-columns: repeat(2, 1fr);
		margin-top: 2rem;

		&.flex {
			display: flex;
			justify-content: center;
		}

		.project-modal {
			width: 100%;
			aspect-ratio: 1.8;
			background: var(--gray__clr);
			border-radius: 12px;
			animation: blinking 2s ease-in-out infinite;
			position: relative;
			overflow: hidden;

			@keyframes blinkin {
				0%,
				100% {
					opacity: 1;
				}
				40% {
					opacity: 0.2;
				}
				70% {
					opacity: 1;
				}
			}

			&__img {
				background: var(--gray__clr__trs);
				position: absolute;
				bottom: -5%;
				left: 50%;
				transform: translateX(-50%);

				width: 85%;
				aspect-ratio: 2 / 1;
				border-radius: 6px;
			}
		}

		.new-project-goes-here {
			background: var(--gray__clr);
			border-radius: 12px;
			border: 2px dashed var(--white__clr__trs2);
			border-spacing: 10px;
			padding: 5rem 1rem;

			display: flex;
			flex-direction: column;
			align-items: center;

			h1 {
				color: var(--verywhite__clr);
				text-transform: uppercase;
				margin-top: 2.5rem;
				text-align: center;
				font-size: calc(var(--medium__size) + 4px);
			}

			p {
				color: var(--white__clr);
				margin-top: 0.5rem;
				text-align: center;
				font-size: var(--normal__size);
			}

			.contact {
				display: block;
				width: max-content;

				text-decoration: none;
				color: var(--black__clr);
				background: var(--special__1);
				padding: 0.5rem 1.5rem;
				font-size: var(--normal__size);
				border-radius: 4px;
				margin-top: 2.5rem;

				&:hover {
					text-decoration: underline;
				}
			}

			@media screen and (width > 700px) {
				grid-column: 1 / span 2;
			}
		}

		@media screen and (width <= 700px) {
			grid-template-columns: 1fr;
		}
	}
}
