media-queries.css

/* 1216px */
@media (max-width: 76em) {
	.projects-grid {
		column-gap: 3.6rem;
	}

	.project-item {
		width: 25rem;
	}

	.project-info {
		margin: 1.8rem auto 2.7rem auto;
	}
}

/* 928px */
@media (max-width: 58em) {
	.grid-3-columns {
		grid-template-columns: 1fr 1fr;
	}

	.projects-grid {
		row-gap: 3.6rem;
	}

	.project-item--1,
	.project-item--3,
	.project-item--4,
	.project-item--6 {
		margin-top: 0;
	}

	.project-item--3 {
		grid-column: 1 / 3;
		justify-self: center;
	}
}

/* 800px */
@media (max-width: 50em) {
	html {
		font-size: 55%;
	}

	.nav-list {
		gap: 1.5rem;
	}

	.footer-nav-column {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
}

/* 656px */
@media (max-width: 41em) {
	html {
		font-size: 50%;
	}

	.section-title {
		margin-bottom: 2.4rem;
	}

	/* HAMBURGER MENU NAV */
	.nav-list {
		flex-direction: column;
		align-items: start;
	}
	.nav-list-item:first-of-type {
		margin-right: 0;
	}

	/* HERO */
	.hero-section {
		padding: 9.6rem 4.8rem;
	}

	/* WEB DEV SECTION */

	.projects-grid {
		margin: 1.2rem auto 4.8rem auto;
	}

	.grid-3-columns {
		grid-template-columns: 1fr;
	}

	.project-item {
		width: 30rem;
	}

	.project-item--3 {
		grid-column: 1 / 2;
	}

	.project-info {
		margin: 2.4rem auto 2.7rem auto;
	}

	/* SKILLS SECTION */

	.skills-logos {
		display: block;
		position: relative;
		height: 25rem;
	}

	.skill-logo {
		width: 25rem;
		position: absolute;
	}
	.html-logo {
		transform: translate(-70%, 0);
	}
	.css-logo {
		transform: translate(-30%, 30%);
	}

	/* CONTACT / CTA SECTION */

	.about-text {
		width: 43rem;
		margin: 0 auto 2.4rem auto;
	}

	.contact-form {
		padding: 3.6rem;
	}

	.form {
		grid-template-columns: 1fr;
	}

	.form-element {
		width: 30rem;
	}

	.form-element,
	.form-submit {
		grid-column: 1 / 2;
	}

	.form-submit {
		width: 100%;
	}
}

/* 400px */
@media (max-width: 25em) {
	.hero-section {
		padding: 9.6rem 2.4rem;
	}
	.hero-title {
		font-size: 5.5rem;
	}

	.hero-undertitle {
		width: 25rem;
		margin: 0 auto;
	}

	/* CONTACT / CTA SECTION */
	.about-text {
		width: 30rem;
		margin: 0 auto 2.4rem auto;
	}

	.form-element {
		width: 25rem;
	}

	/* FOOTER */
	.footer-nav-column {
		grid-template-columns: 1fr;
	}

	.footer-title {
		padding: 0 4.8rem;
	}
}