@import "style.css";

.case-study {
	header {
		margin-left: 16px;
		picture{
			aspect-ratio: 16/9;
			border-radius: 0;
		}
		@media (width > 1024px){
			margin-left: 0;
		}
	}

	inner-column {

		.tags li {
			border: 1px solid var(--main-black);
		}

		.tags + p {
			margin-top: 48px;

			@media(width >= 1024px) {
				margin-top: 64px;
			}
		}

		.text {
			p + p {
				margin-top: 24px;
			}
		}

		.text + case-study-gallery {
			margin-top: 64px;

			@media(width >= 1024px) {
				/*margin-top: 160px;*/
			}
		}
	}

	case-study-gallery {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 64px;

		iframe {
			display: none;
			@media (width >=1024px) {
				display: block;
				aspect-ratio: 16/9;
			} 
		}

		iframe,
		a,
		picture,
		figure{
			grid-column: span 4;
		}

		a + figcaption {
			margin-top: 8px;
		}

		@media (width >=1024px) {
			figure:nth-of-type(even){
				grid-column: 2/5;
			}

			figure:nth-of-type(odd){
				grid-column: span 3;
			}
			/*a {
				width: fit-content;
				height: auto;
			}
			picture {
				height: 75vh;

			}*/
		}
	}

	links {
		padding-top: 24px;
		display: grid;
		gap: 24px;

		@media (width >= 1024px) {
			grid-template-columns: 200px 200px;
			padding-top: 78px;
		}

		li {
			display: flex;
			align-items: center;
			gap: 8px;
		}

		li + li {
			margin-top: 16px;
		}
	}
}