images-portfolio

wp-content/themes/sevastopol-tort-child/assets/css/portfolio-page.css

@@ -0,0 +1,151 @@
+.portfolio-page {
+	overflow: hidden;
+}
+
+.portfolio-hero {
+	padding: 72px 0 54px;
+	background: var(--color-bg);
+}
+
+.portfolio-hero__inner,
+.portfolio-gallery__inner,
+.portfolio-lead__inner {
+	width: min(100% - 40px, var(--container));
+	margin: 0 auto;
+}
+
+.portfolio-hero__inner {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) minmax(220px, 0.32fr);
+	align-items: end;
+	gap: 40px;
+}
+
+.portfolio-hero__content {
+	display: grid;
+	gap: 22px;
+}
+
+.portfolio-hero__eyebrow {
+	color: var(--color-accent);
+	font-size: var(--fz-xs);
+	font-weight: 800;
+	letter-spacing: 0.12em;
+	text-transform: uppercase;
+}
+
+.portfolio-hero__title {
+	max-width: 780px;
+	font-size: var(--fz-xxl);
+	font-weight: 800;
+	line-height: var(--lh-tight);
+}
+
+.portfolio-hero__lead {
+	max-width: 720px;
+	color: var(--color-muted);
+	font-size: var(--fz-md);
+}
+
+.portfolio-hero__meta {
+	display: grid;
+	gap: 6px;
+	border: 1px solid var(--color-line);
+	border-radius: var(--radius-md);
+	background: var(--color-surface);
+	padding: 24px;
+	box-shadow: var(--shadow-soft);
+}
+
+.portfolio-hero__meta-number {
+	color: var(--color-accent-dark);
+	font-size: var(--fz-xl);
+	font-weight: 800;
+	line-height: 1;
+}
+
+.portfolio-hero__meta-text {
+	color: var(--color-muted);
+}
+
+.portfolio-gallery {
+	padding: 28px 0 76px;
+	background: var(--color-bg);
+}
+
+.portfolio-gallery__inner {
+	display: grid;
+	gap: 64px;
+}
+
+.portfolio-gallery__section {
+	display: grid;
+	gap: 24px;
+}
+
+.portfolio-gallery__head {
+	display: grid;
+	gap: 12px;
+	max-width: 820px;
+}
+
+.portfolio-gallery__title {
+	font-size: var(--fz-xl);
+	font-weight: 800;
+	line-height: var(--lh-tight);
+}
+
+.portfolio-gallery__lead {
+	color: var(--color-muted);
+	font-size: var(--fz-md);
+}
+
+.portfolio-gallery__grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+	gap: 16px;
+	align-items: stretch;
+}
+
+.portfolio-gallery__item {
+	aspect-ratio: 1;
+	border: 1px solid var(--color-line);
+	border-radius: var(--radius-md);
+	overflow: hidden;
+	background: var(--color-surface-soft);
+	box-shadow: var(--shadow-soft);
+}
+
+.portfolio-gallery__image {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	transition: transform 0.24s ease;
+}
+
+.portfolio-gallery__item:hover .portfolio-gallery__image {
+	transform: scale(1.04);
+}
+
+.portfolio-lead {
+	padding: 70px 0;
+	background: var(--color-surface-soft);
+}
+
+.portfolio-lead__inner {
+	display: grid;
+	grid-template-columns: minmax(0, 0.82fr) minmax(360px, 0.68fr);
+	gap: 44px;
+	align-items: start;
+}
+
+.portfolio-lead__content {
+	display: grid;
+	gap: 22px;
+}
+
+.portfolio-lead__text {
+	max-width: 560px;
+	color: var(--color-muted);
+	font-size: var(--fz-md);
+}

wp-content/themes/sevastopol-tort-child/assets/css/responsive.css

@@ -9,7 +9,8 @@
 	}
 
 	.service-hero__title,
-	.policy-hero__title {
+	.policy-hero__title,
+	.portfolio-hero__title {
 		font-size: 2.8rem;
 	}
 }
@@ -46,7 +47,10 @@
 	.home-categories,
 	.home-steps,
 	.policy-hero,
-	.policy-content {
+	.policy-content,
+	.portfolio-hero,
+	.portfolio-gallery,
+	.portfolio-lead {
 		padding: 44px 0;
 	}
 
@@ -55,7 +59,9 @@
 	.service-process__inner,
 	.service-lead__inner,
 	.home-hero__inner,
-	.home-steps__inner {
+	.home-steps__inner,
+	.portfolio-hero__inner,
+	.portfolio-lead__inner {
 		grid-template-columns: 1fr;
 	}
 
@@ -94,13 +100,17 @@
 	.home-steps__inner,
 	.site-footer__inner,
 	.policy-hero__inner,
-	.policy-content__inner {
+	.policy-content__inner,
+	.portfolio-hero__inner,
+	.portfolio-gallery__inner,
+	.portfolio-lead__inner {
 		width: min(100% - 20px, var(--container));
 	}
 
 	.service-hero__title,
 	.home-hero__title,
-	.policy-hero__title {
+	.policy-hero__title,
+	.portfolio-hero__title {
 		font-size: 2.2rem;
 	}
 
@@ -119,7 +129,8 @@
 		font-size: 1.7rem;
 	}
 
-	.service-lead__inner {
+	.service-lead__inner,
+	.portfolio-lead__inner {
 		gap: 28px;
 	}