/*
 * Publication (Figma Resources "Notes from the Loom", "Frame 148"): text across the column, the
 * cover 560 x 392 below it with a beige frame on three sides. On mobile the cover comes first.
 */

.pub {
	display: grid;
	justify-items: start;
	gap: 112px;
}

.pub__body {
	display: grid;
	gap: 16px;
}

.pub__text {
	color: var(--c-text-2);
}

.pub__text > * + * {
	margin-top: var(--lh-body);
}

.pub__actions {
	display: grid;
	justify-items: start;
	gap: 8px;
	margin-top: 16px; /* 32 from the text with the gap */
}

.pub__note {
	font-size: var(--t-sub);
	line-height: var(--lh-sub);
	font-weight: 500;
	color: var(--c-muted);
}

.pub__cover {
	width: 100%;
	max-width: 560px;
	aspect-ratio: 560 / 392;
	padding: 4px 4px 0;
	background: var(--c-beige);
}

.pub__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
	background: var(--c-line-2);
}

@media (max-width: 767px) {
	.pub {
		gap: 16px;
	}

	.pub__cover {
		order: -1;
		max-width: none;
		aspect-ratio: 328 / 392;
	}

	.pub__actions {
		justify-items: stretch;
		text-align: center;
	}

	.pub__buttons .btn {
		flex: 1;
	}
}