/* Below 1600px */
@media (max-width: 100em) {
	.gallery-section {
		padding: 12rem;
	}
}

/* below 1200 px */
@media (max-width: 75em) {
	.footer {
		padding: 0 4rem;
	}

	.gallery-preview-section {
		grid-template-columns: 1fr 1fr;
	}

	.gallery-preview-content {
		padding: 12.8rem 3.6rem;
	}

	.contact-content {
		gap: 6.4rem;
	}

	/* Contact website */
	.contact-form-section {
		padding: 12rem 8rem;
	}

	/* gallery website */
	.gallery {
		grid-template-columns: repeat(5, 1fr);
		gap: 2.4rem;
	}
}

/* Below 992px */
@media (max-width: 62em) {
	.contact-section {
		padding: 12.8rem 6.4rem;
	}
	.contact-content {
		grid-template-columns: repeat(2, 1fr);
	}

	/* gallery website */
	.gallery {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Below 816px */
@media (max-width: 51em) {
	.header-logo-link {
		height: 40%;
	}

	.footer-logo {
		height: 2.4rem;
	}

	h1 {
		font-size: 5.2rem;
	}

	.hero-content {
		padding-left: 8rem;
	}

	.contact-content {
		display: flex;
		flex-direction: column-reverse;
		padding-top: 12.8rem;
		padding-bottom: 12.8rem;
		background-image: url(../img/arasaka_mech3.jpg);
		background-position: center;
		position: relative;
		z-index: 1;
	}

	.contact-content::after {
		display: block;
		content: '';
		background: linear-gradient(
			to left,
			rgba(0, 0, 0, 0.05),
			rgba(0, 0, 0, 0.6),
			rgba(0, 0, 0, 0.8)
		);
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: -1;
		border-radius: 12px;
	}

	.contact-content img {
		display: none;
	}

	.gallery-preview-section {
		display: flex;
		flex-direction: column-reverse;
	}

	.gallery-preview-content {
		padding: 3.6rem;
	}

	/* gallery website */
	.gallery-section {
		padding: 12rem 8rem;
	}

	.gallery {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Below 656px */
@media (max-width: 41em) {
	h1 {
		font-size: 4.2rem;
	}
	h2 {
		font-size: 3.2rem;
	}

	/* Mobile navigation */
	.header-nav {
		background-color: rgba(0, 0, 0, 0.85);
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: all 0.25s;
		opacity: 0;
		pointer-events: none;
		visibility: hidden;
		transform: translateX(100%);
	}

	.header-nav-list {
		flex-direction: column;
		gap: 6.4rem;
		align-items: center;
		font-size: 4.8rem;
	}

	.nav-button {
		display: initial;
	}

	#hamburger-icon {
		display: initial;
	}
	.nav-open .header-nav {
		opacity: 1;
		pointer-events: auto;
		visibility: visible;
		transform: translateX(0);
	}

	.nav-open #hamburger-icon {
		display: none;
	}

	.nav-open #close-icon {
		display: initial;
	}

	/* Contact website */
	.contact-form-section {
		padding: 12rem 6rem;
	}

	/* gallery website */
	.gallery-section {
		padding: 12rem 4.8rem;
	}
}

/* Below 576px */
@media (max-width: 36em) {
	.header {
		padding: 0 2.4rem;
	}

	.hero-content {
		padding: 3.2rem;
		padding-top: 7rem;
	}

	.contact-section {
		padding: 4.8rem 2.4rem;
	}

	.footer {
		padding: 6.4rem 3.2rem;
		flex-direction: column;
		gap: 6.4rem;
	}
	.footer-logo {
		height: 3.2rem;
	}

	/* Contact website */
	.contact-form-section {
		padding: 12rem 0 0 0;
	}

	.contact-form-section h1 {
		margin-left: 2rem;
	}

	.contact-form {
		padding: 2.4rem;
		box-shadow: none;
		border-top: 2px solid #e60000;
		border-bottom: 2px solid #e60000;
		border-radius: 0;
	}

	.form-input {
		font-size: 1.8rem;
	}

	/* gallery website */
	.gallery {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Below 432px */
@media (max-width: 27em) {
	.header {
		height: 6rem;
	}

	.hero-section {
		height: auto;
		border-bottom: 3px solid #e60000;
	}

	.hero-content {
		gap: 1.6rem;
		padding: 7rem 1.6rem;
		height: auto;
	}

	h1 {
		font-size: 3.6rem;
	}
	h2 {
		font-size: 2.8rem;
	}

	p {
		font-size: 1.8rem;
	}

	.contact-section {
		padding: 0;
	}

	.contact-content {
		padding: 3.6rem 2rem;
		box-shadow: none;
		border-radius: 0;
	}

	.contact-content::after {
		border-radius: 0;
	}

	.contact-content:hover {
		transform: none;
	}

	.gallery-preview-section {
		padding: 3.6rem 1.6rem;
	}

	.gallery-preview {
		gap: 0.6rem;
	}

	.gallery-preview-content {
		padding: 4.8rem 0;
	}

	/* gallery website */
	.gallery-section {
		padding: 12rem 2.4rem;
	}
}