/*
 * Portal cards. Figma portal 1940:49050 (1020 column): header, 24, rows of two
 * 480-wide cards (justify space-between), 32 between rows; screenshot 502:373
 * r20 with a 1px background-grey border and 2px 4px 8px rgba(0,0,0,.1) shadow;
 * 16 below it the text (body/S dark) with a 1px border/light rule on the left
 * and 16 side padding; button/M filled, centred. Mobile 1699:30006: one column.
 */

.portal-cards__inner {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.portal-cards__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 480px));
	justify-content: space-between;
	gap: 32px 24px;
}

.portal-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.portal-card__media {
	aspect-ratio: 480 / 357;
	border: 1px solid var(--c-bg-grey);
	border-radius: var(--r-l);
	overflow: hidden;
	background: var(--c-bg-grey);
	box-shadow: 2px 4px 8px rgba(0, 0, 0, .1);
}

.portal-card__text {
	padding-inline: 16px;
	border-left: 1px solid var(--c-border-light);
	font: var(--f-body-s);
	color: var(--c-text-dark);
}

.portal-cards__action { display: flex; justify-content: center; margin-top: 8px; }   /* 32 under the last row (1940:49050) */
.portal-cards__action .btn { min-width: 179px; }

@media (max-width: 767px) {
	.portal-cards__list { grid-template-columns: minmax(0, 1fr); gap: 32px; }   /* 1699:30006 list gap 32 */
	.portal-cards__action { margin-top: 0; }                                    /* 24 under the list */
}