/*
 * Spacca - Issue 3: per-article photo layouts (loaded only on /issue-3/).
 * Shared shell lives in issue.css. Class convention: .spacca-a{N}-* = article N.
 */

/* ===== Article 1 - Distant Yet Close ===================================
   Two rows, space-between, bottom-aligned. Mobile: the right photo on top
   (full width), the other below at 80% (div.1 right, div.2 left). */
.spacca-a1-r1,
.spacca-a1-r2 {
	display: flex;
	flex-direction: column;
	row-gap: 2rem;
}

.spacca-a1-r1 img,
.spacca-a1-r2 img {
	display: block;
	height: auto;
}

/* div.1 mobile: img.2 top full, img.1 below 80% right. */
.spacca-a1-r1 img:nth-child(1) {
	width: 80%;
	align-self: flex-end;
}

.spacca-a1-r1 img:nth-child(2) {
	width: 100%;
	order: -1;
}

/* div.2 mobile: img.3 top full, img.4 below 80% left. */
.spacca-a1-r2 img:nth-child(1) {
	width: 100%;
}

.spacca-a1-r2 img:nth-child(2) {
	width: 80%;
	align-self: flex-start;
}

@media (min-width: 768px) {
	.spacca-a1-r1,
	.spacca-a1-r2 {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
		row-gap: 0;
	}

	.spacca-a1-r1 img:nth-child(1) {
		width: 30%;
		align-self: auto;
	}

	.spacca-a1-r1 img:nth-child(2) {
		width: 40%;
		order: 0;
	}

	.spacca-a1-r2 img:nth-child(1) {
		width: 40%;
	}

	.spacca-a1-r2 img:nth-child(2) {
		width: 30%;
		align-self: auto;
	}
}

/* ===== Article 2 - Lens to Lens w/ ILCANILE ===========================
   Two rows, space-between, bottom-aligned (desktop). Mobile: centered column,
   the wide photo on top (full width), the other below at 50%. */
.spacca-a2-r1,
.spacca-a2-r2 {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 2rem;
}

.spacca-a2-r1 img,
.spacca-a2-r2 img {
	display: block;
	height: auto;
}

/* div.1 mobile: img.1 top full, img.2 below 50%. */
.spacca-a2-r1 img:nth-child(1) {
	width: 100%;
}

.spacca-a2-r1 img:nth-child(2) {
	width: 50%;
}

/* div.2 mobile: img.4 top full, img.3 below 50%. */
.spacca-a2-r2 img:nth-child(1) {
	width: 50%;
}

.spacca-a2-r2 img:nth-child(2) {
	width: 100%;
	order: -1;
}

@media (min-width: 768px) {
	.spacca-a2-r1,
	.spacca-a2-r2 {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
		row-gap: 0;
	}

	.spacca-a2-r1 img:nth-child(1) {
		width: 50%;
	}

	.spacca-a2-r1 img:nth-child(2) {
		width: 20%;
	}

	.spacca-a2-r2 img:nth-child(1) {
		width: 20%;
	}

	.spacca-a2-r2 img:nth-child(2) {
		width: 40%;
		order: 0;
	}
}

/* ===== Article 3 - The Arches DIY =====================================
   div.1: img.1 70% left, img.2 30% right, column-gap like the section
   (photos shrink to absorb the gap). div.2: 30% + 30%, space-between.
   Mobile: full-width column, div.1 img.2 on top, div.2 img.4 on top.
   Desktop vertical alignment unspecified -> default top (flex-start). */
.spacca-a3-r1,
.spacca-a3-r2 {
	display: flex;
	flex-direction: column;
	row-gap: 2rem;
}

.spacca-a3-r1 img,
.spacca-a3-r2 img {
	display: block;
	width: 100%;
	height: auto;
	min-width: 0;
}

.spacca-a3-r1 img:nth-child(2),
.spacca-a3-r2 img:nth-child(2) {
	order: -1;
}

@media (min-width: 768px) {
	.spacca-a3-r1 {
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		column-gap: 3rem;
		row-gap: 0;
	}

	.spacca-a3-r2 {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		row-gap: 0;
	}

	.spacca-a3-r1 img,
	.spacca-a3-r2 img {
		flex-shrink: 0;
	}

	.spacca-a3-r1 img:nth-child(1) {
		width: calc(70% - 3rem);
	}

	.spacca-a3-r1 img:nth-child(2) {
		width: 30%;
		order: 0;
	}

	.spacca-a3-r2 img {
		width: 30%;
	}

	.spacca-a3-r2 img:nth-child(2) {
		order: 0;
	}
}

/* ===== Article 4 - Apulean ============================================
   div.1: img.1 50% left, img.2 30% right, space-between. div.2: img.3 20%
   left, img.4 60% right, space-between, bottom-aligned. Mobile: full-width
   column, div.2 img.3 at 50%. Desktop div.1 vertical alignment unspecified
   -> default top (flex-start). */
.spacca-a4-r1,
.spacca-a4-r2 {
	display: flex;
	flex-direction: column;
	row-gap: 2rem;
}

.spacca-a4-r1 img,
.spacca-a4-r2 img {
	display: block;
	width: 100%;
	height: auto;
	min-width: 0;
}

.spacca-a4-r2 img:nth-child(1) {
	width: 50%;
}

@media (min-width: 768px) {
	.spacca-a4-r1,
	.spacca-a4-r2 {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
		row-gap: 0;
	}

	.spacca-a4-r1 img:nth-child(1) {
		width: 60%;
	}

	.spacca-a4-r1 img:nth-child(2) {
		width: 30%;
	}

	.spacca-a4-r2 img:nth-child(1) {
		width: 20%;
	}

	.spacca-a4-r2 img:nth-child(2) {
		width: 60%;
	}
}

/* ===== Article 5 - 90's Maybe =========================================
   div.1: img.1 30% + img.2 30%, centered, column-gap 8rem. Solo img.3 full
   width. div.2: three photos at 20%, column-gap 8rem, from the left.
   Mobile: full-width column; div.1 photos at 80%, div.2 photos at 60%.
   Desktop rows justify from the left (flex-start). */
.spacca-a5-r1,
.spacca-a5-r2 {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 2rem;
}

.spacca-a5-r1 img,
.spacca-a5-r2 img,
.spacca-a5-solo {
	display: block;
	height: auto;
	min-width: 0;
}

.spacca-a5-r1 img {
	width: 80%;
}

.spacca-a5-solo {
	width: 100%;
}

.spacca-a5-r2 img {
	width: 60%;
}

@media (min-width: 768px) {
	.spacca-a5-r1,
	.spacca-a5-r2 {
		flex-direction: row;
		justify-content: center;
		align-items: center;
		column-gap: 8rem;
		row-gap: 0;
	}

	.spacca-a5-r1 img {
		width: 30%;
	}

	.spacca-a5-r2 img {
		width: 20%;
	}
}

/* ===== Article 6 - Wish I Had More to Say... =========================
   div.1: img.1 20% + img.2 30%, space-between, bottom-aligned. Solo img.3
   80% centered. div.2: two photos at 30%, space-between. Mobile: full-width
   column; div.1 img.2 on top (full), img.1 below at 50% right-aligned; solo
   and div.2 full width. Desktop div.2 alignment unspecified -> bottom
   (flex-end), consistent with div.1. */
.spacca-a6-r1,
.spacca-a6-r2 {
	display: flex;
	flex-direction: column;
	row-gap: 2rem;
}

.spacca-a6-r1 img,
.spacca-a6-r2 img,
.spacca-a6-solo {
	display: block;
	width: 100%;
	height: auto;
	min-width: 0;
}

.spacca-a6-r1 img:nth-child(2) {
	order: -1;
}

.spacca-a6-r1 img:nth-child(1) {
	width: 50%;
	align-self: flex-end;
}

@media (min-width: 768px) {
	.spacca-a6-r1,
	.spacca-a6-r2 {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
		row-gap: 0;
	}

	.spacca-a6-solo {
		width: 80%;
		margin-inline: auto;
	}

	.spacca-a6-r1 img:nth-child(1) {
		width: 20%;
		align-self: auto;
	}

	.spacca-a6-r1 img:nth-child(2) {
		width: 30%;
		order: 0;
	}

	.spacca-a6-r2 img {
		width: 30%;
	}
}