@import "style.css";

.case-study {
	case-intro,
	case-block,
	case-text-block,
	case-image-block,
	next-project {
		display: grid;
	}

	header {
		
		case-intro + picture {
			margin-top: 24px;
		}


		@media (width >= 1024px) {
			transform: translate(0,-8px);
			padding-bottom: 24px;
		}
	}


	case-intro {
		display: grid;
		gap: 24px;
		
		h3 {
			grid-column: span 2;
		}

		.deets {
			align-self: end;
			grid-column: span 2;
			/*padding-block: 8px;*/
			display: grid;
			gap: 8px;

			@media (width >= 1000px) {
				grid-column: 1;

			}
		}
	}

	case-block + next-project {
		margin-top: 48px;

		@media (width >= 900px) {
			margin-top: 128px;
		}
	}

	header + inner-column {
		margin-top: 24px;
	}

	case-text-block {
		gap: 8px;
		@media (width >= 1000px) {
			grid-template-columns: 1fr 1fr;
			gap: 16px;
			p {
				grid-column: span 2;
			}
		}
	}

	case-intro case-text-block {
		@media (width >= 1000px) {
			gap: 0;
		}
	}

	case-block {
		gap: 32px;

		@media (width >= 1024px) {
			grid-template-columns: repeat(6, 1fr);
			gap: 64px;

			case-intro {
				grid-column: span 3;
			}

			case-text-block {
				grid-column: span 3;
				align-self: end;
			}
		}
	}

	case-block + case-block {
		margin-top: 64px;
	}

	case-image-block {
		gap: 16px;

		.portrait {
			/*aspect-ratio: 4/3;*/

			/*transform: translate(-145px, 0);*/
		}

		video.compas-first,
		video.coco-first {
			grid-row: 1;
		}

		@media (width >= 1024px) {
			grid-template-columns: repeat(6, 1fr);
			grid-column: span 6;

			picture {
				/*grid-column: span 2;*/
				align-self: start;
			}

			.portrait {
				grid-column: span 2;
				grid-row: 2 / 5;
			}

			.third {
				grid-row: span 4;
				grid-column: span 4;
			}

			.fourth,
			.sixth{
				grid-column: span 3;
			}

			.seventh {
				grid-column: span 6;
			}

			video {
				grid-column: span 3;
			}

			video.compas-first,
			video.coco-first{
				grid-column: span 6;
			}

			.compas-second{
				
			}

			.compas-fourth {
				grid-column: span 4;
				grid-row: span 3;
			}

			.compas-fifth {
				grid-column: span 2;
				grid-row: 4;
			}

			.compas-ninth {
				grid-column: span 6;
			}

			.coco-second,
			.coco-third,
			.coco-fourth {
				grid-column: span 2;
			}

			.coco-second {
				align-self: center;
			}

			.coco-fifth,
			.coco-ninth {
				grid-column: span 3;
				grid-row: 3;
			}

			.coco-sixth {
				grid-column: span 4;
				grid-row: span 2;
			}

			.coco-seventh {
				grid-row: 4;
				grid-column: span 3;
			}

			.coco-eighth {
				grid-column: span 2;
			}

			.coco-ninth {
				grid-row: 3 / 5;
			}

			.coco-tenth {
				grid-column: span 6;
			}

			.mania {
				grid-column: span 3;
			}

			.crft-first {
				grid-column: span 6;
			}

			.crft-second,
			.crft-fourth {
				grid-column: span 2;
			}

			.crft-third {
				grid-column: span 4;
				grid-row: span 2;
			}

			.crft-fourth {
				align-self: end;
			}

			.crft-fifth {
				grid-column: span 6;
			}

			.crft-sixth,
			.crft-seventh {
				grid-column: span 3;
			}

			.crft-research {
				grid-column: span 3;
			}






			.landscape{
				
				/*justify-self: end;*/
			}

			

	
		}

		
	}

	next-project {
		gap: 8px;
		justify-self: end;

		picture {
			/*max-width: 400px;*/
		}
		@media (width >= 1000px) {
			grid-template-columns: 1fr 1fr;

			/*h4 {
				grid-column: 2;
			}
			a {
				grid-column: 2;
			}*/


		}
		
	/*}*/
}