/* Strona "O nas" (odwzorowanie brendz.com/over-ons) */

body.page-template-page-o-nas,
.about, .about-hero { font-family: "Asap", var(--font); }

.about-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	aspect-ratio: 2000 / 650;
	overflow: hidden;
	background: #1d2a1a;
	isolation: isolate;
}
.about-hero__image {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.about-hero::after { /* przyciemnienie u dołu pod nagłówkiem */
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 60%);
}
.about-hero__inner { padding-bottom: 32px; }
@media (min-width: 768px) { .about-hero__inner { padding-bottom: 70px; } }

.about-hero__title {
	margin: 0;
	font-size: 28px;
	font-weight: 700;
	line-height: 33.6px;
	padding-inline: 15px;
	color: #fff;
}
@media (min-width: 768px) { .about-hero__title { padding-inline: 0; font-size: 42px; line-height: 50.4px; max-width: 763px; } }

/* Wiersze tekst + zdjęcie */
.about-row { padding: 35px 0; background: #fff; color: #425563; }
.about-row--dark { background: #425563; color: #fff; }
@media (min-width: 768px) { .about-row { padding: 70px 0; } }

.about-row__grid { display: grid; gap: 14px; }
@media (min-width: 768px) {
	.about-row__grid { grid-template-columns: 1fr 1fr; align-items: center; gap: 0; }
	.about-row__media { justify-self: start; }
	.about-row__text { justify-self: end; }
	.about-row--reverse .about-row__media { grid-column: 2; grid-row: 1; justify-self: end; }
	.about-row--reverse .about-row__text { grid-column: 1; grid-row: 1; justify-self: start; }
}

.about-row__media { width: 100%; max-width: 580px; margin: 0; }
.about-row__media img {
	display: block;
	width: 100%;
	aspect-ratio: 369 / 234;
	object-fit: cover;
	border-radius: 14px;
}
@media (min-width: 768px) { .about-row__media img { aspect-ratio: 1; } }

.about-row__text { width: 100%; max-width: 580px; }
.about-row h2 {
	margin: 0 0 12.25px;
	font-size: 24.5px;
	font-weight: 700;
	line-height: 29.4px;
	color: #394a53;
}
.about-row--dark h2 { color: #fff; }
@media (min-width: 768px) { .about-row h2 { margin-bottom: 17.5px; font-size: 35px; line-height: 42px; } }

.about-row p { margin: 0 0 16px; font-size: 16px; line-height: 25.6px; color: inherit; }
.about-row ul { margin: 0 0 16px; padding-left: 28px; list-style: disc; }
.about-row li { margin-bottom: 8px; font-size: 16px; line-height: 24px; }
.about-row > :last-child, .about-row__text > :last-child { margin-bottom: 0; }