@charset "UTF-8";

@media (max-width: 730px) {
	header {
		background-image: url("../images/mobile/image-header.jpg");
		padding: 20px 25px;

		.wrapper {
			button {
				all: unset;
			}

			nav {
				position: fixed;
				background-color: var(--white);
				right: 25px;
				top: 80px;
				width: calc(100% - 50px);
				padding: 30px 10px;
				color: var(--grey-600);
				opacity: 0;
				visibility: hidden;
				pointer-events: none;
				transition: all 0.15s ease-in-out;
				display: flex;
				justify-content: center;
				align-items: center;

				&::before {
					content: "";
					position: absolute;
					top: -23px;
					right: 0px;
					border: 12px solid var(--white);
					border-color: transparent var(--white) var(--white) transparent;
				}

				ul {
					flex-direction: column;
					font-weight: 600;

					& li:last-of-type {
						background-color: var(--yellow-500);
					}
				}
			}

			nav.active {
				display: flex;
				opacity: 1;
				visibility: visible;
				pointer-events: auto;
			}
		}

		#home {
			h1 {
				font-size: 1.5em;
				margin: 10px;
			}
		}
	}

	main {
		.grid-sections {
			grid-template-columns: 1fr;
			grid-template-rows: repeat(6, 1fr);
			grid-template-areas: "image1" "section1" "image2" "section2" "section3" "section4";

			& > section {
				text-align: center;
				justify-content: center;
				align-items: center;
				padding: 30px 25px 60px;
			}

			.section3 {
				background: var(--white) url("../images/mobile/image-graphic-design.jpg") no-repeat center top/cover;
			}

			.section4 {
				background: var(--white) url("../images/mobile/image-photography.jpg") no-repeat center center/cover;
			}
		}

		#testimonials-section {
			text-align: center;
			padding-left: 30px;
			padding-right: 30px;
			.container-testimonials {
				flex-direction: column;
			}
		}

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

	footer {
		#attribution {
			align-items: center;
			flex-direction: column;
		}
	}
}