/* Main elements */

.body-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;;
}

:root {
    /* Gallery sizes */
    --gallery-small: 300px;
    --gallery-large: 600px;
}

.project-hero {
	justify-self: center;
	margin: 0 25%;
	max-width: 600px;
}

.project-hero h1 {
	margin-bottom: 20px;
}

.project-hero p {
	margin: 10px 0;
}


@media (min-width: 1200px) {
/* Gallery grid */
.gallery {
    display: grid;
    grid-template-columns: repeat(4, var(--gallery-small));
    grid-template-rows: repeat(4, var(--gallery-small));
    align-items: start;

    padding: 0;
}

.gallery img {
    height: var(--gallery-small);
    width: var(--gallery-small);
    border: 2px solid var(--bg-color);
}

.img1 {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    height: var(--gallery-large) !important;
    width: var(--gallery-large) !important;
}

.img2 {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}

.img3 {
    grid-column: 4 / 5;
    grid-row: 1 / 2;
}

.img4 {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
}

.img5 {
    grid-column: 4 / 5;
    grid-row: 2 / 3;
}

.img6 {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

.img7 {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
}

.img8 {
    grid-column: 2 / 4;
    grid-row: 3 / 5;
    height: var(--gallery-large) !important;
    width: var(--gallery-large) !important;
}

.img9 {
    grid-column: 4 / 5;
    grid-row: 3 / 4;
}

.img10 {
    grid-column: 4 / 5;
    grid-row: 4 / 5;
}

}

@media (max-width: 1199px) {
	.gallery {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;

		width: 100%;
	}

	.gallery img {
		width: 100%;
		height: auto;
		min-width: 100px;
		min-height: 100px;
		border: 2px solid var(--bg-color);
	}
}