*. *::after, *::before {
	box-sizing: border-box;
}

[class^='grid-col-'] {
	float: left;
	width: 100%;
}

@media (max-width: 1500px) {
	.intro-block {
		gap: 0em;
		transition: gap 0.5s ease-in-out;
	}

	.footer-block h1 {
		font-size: 2em;
		transition: font-size 0.5s ease-in-out;
	}
}

/* ~~ tablets ~~ */
@media (max-width: 1000px) { 
	.col-1of2 {
		width: 100%;
		transition: width 0.5s ease-in-out;
	}

	.col-1of3 {
		width: 50%;
		transition: width 0.5s ease-in-out;
	}

	.footer-block > div {
		flex-direction: column;
		gap: 0;
		transition: all 0.5s ease-in-out;
	}
}

/* ~~ mobile ~~ */
@media (max-width: 880px) {
	.col-1of3, .col-2of3 {
		width: 100%;
		transition: width 0.5s ease-in-out;
	}

	a h1 {
		font-size: 2em;
		transition: font-size 0.5s ease-in-out;
	}

	h2 {
		padding-top: 0.5em;
		transition: padding-top 0.5s ease-in-out;
	}

	/* home page */

	.work-block {
		display: flex;
		flex-wrap: wrap;
		gap: 2.5em;
	}

	.project-block { /* switches from 4 work items to 2 */
		width: calc(50% - 2.5em);
		transition: width 0.5s ease-in-out;
	}

	/* project page */

	.content-block {
		flex-direction: column;
		transition: flex-direction 0.5s ease-in-out;
	}

	.image-gallery, .image-gallery .column {
		gap: 1.5em;
		transition: gap 0.5s ease-in-out;
	}

	/* about page */ 

	#work-experience {
		padding-top: 0em !important;
	}

	.about-block {
		display: flex;
		flex-flow: row wrap;
		gap: 2.5em;

		padding-top: 0em;
		transition: all 0.5s ease-in-out;
	}

	.about-block > div {
		display: flex;
		flex: 1 100%;
		flex-direction: row;
		gap: 2.5em;
		justify-content: space-between;

		text-align: right;
		
		transition: all 0.5s ease-in-out;
	}
}

/* ~~ mobile ~~ */
@media (max-width: 575px) {
	.col-1of3 {
		width: 100%;
	}

	h4, p {
		font-size: 1em;
		transition: font-sizes 0.5s ease-in-out;
	}

	/* home page */

	.work-block {
		flex-direction: column;
		transition: flex-direction 0.5s ease-in-out;
	}

	.project-block {
		width: 100%;
		flex-direction: column;
		transition: all 0.5s ease-in-out;
	}

	/* project page */

	.col-2of3 > .image-block:not(:last-child) {
		margin-bottom: 1.5em;
		transition: margin-bottom 0.5s ease-in-out;
	}

	.image-block {
		gap: 1.5em;
		transition: gap 0.5s ease-in-out;
	}

	.image-block img {
		max-height: none;
		border-radius: 2px;
		transition: all 0.5s ease-in-out;
	}

	.image-gallery {
		flex-direction: column;
		transition: all 0.5s ease-in-out;
	}

	.image-gallery .column, .project-gallery, .project-gallery .column {
		flex-direction: row !important;
		transition: all 0.5s ease-in-out;
	}

	.image-item img {
		height: 100%;
		object-fit: fill;
	}

	.project-gallery div a {
		gap: 25px;
		transition: all 0.5s ease-in-out;
	}

	.project-gallery div p { 
		padding-bottom: 15px;
		transition: all 0.5s ease-in-out;
	}

	.project-gallery > div:last-child {
		padding-bottom: 0em !important;
	}

	/* about page */
	
	table {
		font-size: 1em;
		transition: font-size 0.5s ease-in-out;
	}
}