/* ----------------------------------------------------------
   Portfolio archive + single
   ---------------------------------------------------------- */

body.k404-portfolio-page {
	--home-max-width: 1520px;
	--home-gutter: clamp(20px, 1.323vw + 14.84px, 40px);
	--home-button-fill-red: #fe4a32;
	--home-button-fill-orange: #ff8737;
	--home-button-fill-yellow: #ffd84d;
	--home-button-fill-blue: #78cfff;
	--home-button-fill-indigo: #7a84ff;
	--home-pill-radius: 999px;
	--home-ui-fg: #101010;
	--home-ui-border: rgba(16, 16, 16, 0.92);
	--home-ui-code: #fe3334;
	--home-spectrum-current: #fe4a32;
	--home-transition: 380ms cubic-bezier(0.22, 1, 0.36, 1);
	--home-bottom-offset: 0px;
	background: #fff;
	margin: 0 !important;
	scroll-behavior: smooth;
	overflow-x: clip;
}

body.k404-portfolio-archive {
	--portfolio-archive-top-space: clamp(83.3488px, calc(26.0465vw), 112px);
	--portfolio-archive-title-bottom: clamp(22.3256px, calc(6.9767vw), 30px);
	--portfolio-archive-grid-row-gap: clamp(13.3953px, calc(4.186vw), 18px);
	--portfolio-archive-section-bottom: clamp(43.1628px, calc(13.4884vw), 58px);
	--portfolio-archive-cta-top: clamp(52.093px, calc(16.2791vw), 70px);
}

@media (min-width: 430px) {
	body.k404-portfolio-archive {
		--portfolio-archive-top-space: clamp(112px, calc(99.8792px + 2.8188vw), 154px);
		--portfolio-archive-title-bottom: clamp(30px, calc(25.9597px + 0.9396vw), 44px);
		--portfolio-archive-grid-row-gap: clamp(18px, calc(14.5369px + 0.8054vw), 30px);
		--portfolio-archive-section-bottom: clamp(58px, calc(48.1879px + 2.2819vw), 92px);
		--portfolio-archive-cta-top: clamp(70px, calc(61.3423px + 2.0134vw), 100px);
	}
}

@media (min-width: 1920px) {
	body.k404-portfolio-archive {
		--portfolio-archive-top-space: clamp(154px, calc(8.0208vw), 154px);
		--portfolio-archive-title-bottom: clamp(44px, calc(2.2917vw), 44px);
		--portfolio-archive-grid-row-gap: clamp(30px, calc(1.5625vw), 30px);
		--portfolio-archive-section-bottom: clamp(92px, calc(4.7917vw), 92px);
		--portfolio-archive-cta-top: clamp(100px, calc(5.2083vw), 100px);
	}
}

body.k404-portfolio-page .elastic-fields,
body.k404-portfolio-page .elastic-fields .section {
	margin: 0;
}

body.k404-portfolio-page .section-width,
body.k404-portfolio-page .home-top-controls .section-width,
body.k404-portfolio-page .footer-wrapper .section-width {
	width: min(calc(100% - (2 * var(--home-gutter))), var(--home-max-width));
	margin-inline: auto;
	padding-inline: 0;
}

body.k404-portfolio-page .home-top-controls {
	position: fixed;
	top: 40px;
	left: 0;
	right: 0;
	z-index: 48;
	pointer-events: none;
}

body.k404-portfolio-page .home-top-controls .section-width {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	pointer-events: auto;
}

body.k404-portfolio-page .home-top-right {
	display: flex;
	align-items: center;
	gap: 0;
}

body.k404-portfolio-page .home-top-left .home-ui-pill {
	min-width: 202px;
}

body.k404-portfolio-page .home-top-right .home-ui-pill:nth-child(1) {
	min-width: 152px;
}

body.k404-portfolio-page .home-top-right .home-ui-pill:nth-child(2) {
	min-width: 96px;
}

body.k404-portfolio-page .home-top-right .home-ui-pill:nth-child(3) {
	min-width: 138px;
}

body.k404-portfolio-page .home-top-right .home-ui-pill + .home-ui-pill {
	margin-left: -1px;
}

body.k404-portfolio-page .home-ui-pill,
body.k404-portfolio-page .section .button-section a,
body.k404-portfolio-page .footer-wrapper .button-section a {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 20px 30px;
	border: 1px solid var(--home-ui-border);
	border-radius: var(--home-pill-radius);
	background: rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(6px);
	color: var(--home-ui-fg);
	font-family: inherit;
	font-size: clamp(15px, 0.083vw + 14.68px, 17px);
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	overflow: hidden;
	transition:
		color var(--home-transition),
		border-color var(--home-transition),
		background-color var(--home-transition),
		box-shadow var(--home-transition),
		transform var(--home-transition);
	isolation: isolate;
}

body.k404-portfolio-page .home-ui-pill::before,
body.k404-portfolio-page .section .button-section a::before,
body.k404-portfolio-page .footer-wrapper .button-section a::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	background-color: var(--home-button-fill-red);
	opacity: 0;
	transform: scale(1.04);
	transition:
		opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
	z-index: -1;
}

body.k404-portfolio-page .home-ui-pill:hover,
body.k404-portfolio-page .home-ui-pill.is-active,
body.k404-portfolio-page .home-ui-pill:focus-visible,
body.k404-portfolio-page .section .button-section a:hover,
body.k404-portfolio-page .section .button-section a:focus-visible,
body.k404-portfolio-page .footer-wrapper .button-section a:focus-visible,
body.k404-portfolio-page .footer-wrapper .button-section a:hover {
	color: var(--home-ui-fg);
	border-color: transparent;
	box-shadow: none;
	transform: none;
	background: transparent;
}

body.k404-portfolio-page .home-ui-pill:hover::before,
body.k404-portfolio-page .home-ui-pill.is-active::before,
body.k404-portfolio-page .home-ui-pill:focus-visible::before,
body.k404-portfolio-page .section .button-section a:hover::before,
body.k404-portfolio-page .section .button-section a:focus-visible::before,
body.k404-portfolio-page .footer-wrapper .button-section a:focus-visible::before,
body.k404-portfolio-page .footer-wrapper .button-section a:hover::before {
	opacity: 1;
	transform: scale(1);
	animation: k404-button-fill-sequence 9s linear infinite;
}

body.k404-portfolio-page .header-wrapper.header-wrapper-home {
	position: fixed;
	left: 0;
	right: 0;
	bottom: max(0px, var(--home-bottom-offset, 0px));
	z-index: 44;
	background: transparent;
}

body.k404-portfolio-page .header.home-bottom-nav {
	position: relative;
	width: min(calc(100% - (2 * var(--home-gutter))), var(--home-max-width));
	max-width: none;
	margin: 0 auto;
	padding-inline: var(--home-gutter);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	column-gap: clamp(26px, 3vw, 64px);
	height: 77px;
	background: transparent;
	border-top: 0;
	overflow: visible;
}

body.k404-portfolio-page .header.home-bottom-nav::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.96);
	border-top: 1px solid rgba(16, 16, 16, 0.12);
	backdrop-filter: blur(16px);
	opacity: 0;
	transition: opacity var(--home-transition);
	pointer-events: none;
}

body.k404-portfolio-page.home-menu-solid .header.home-bottom-nav::before {
	opacity: 1;
}

body.k404-portfolio-page.home-menu-footer .header.home-bottom-nav::before {
	opacity: 0;
}

body.k404-portfolio-page .header.home-bottom-nav .col-left,
body.k404-portfolio-page .header.home-bottom-nav .col-center,
body.k404-portfolio-page .header.home-bottom-nav .col-right {
	position: relative;
	z-index: 1;
	min-width: 0;
}

body.k404-portfolio-page .header.home-bottom-nav .col-left,
body.k404-portfolio-page .header.home-bottom-nav .col-right {
	display: flex;
	align-items: center;
}

body.k404-portfolio-page .header.home-bottom-nav .col-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

body.k404-portfolio-page .header .menu-desktop .menu {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.k404-portfolio-page .header .menu-desktop .menu a,
body.k404-portfolio-page .header .col-right a,
body.k404-portfolio-page .header .header-code,
body.k404-portfolio-page .site-mark {
	color: var(--home-ui-fg);
	text-decoration: none;
	transition: color var(--home-transition), opacity var(--home-transition), transform var(--home-transition);
}

body.k404-portfolio-page .header .menu-desktop .menu a {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding-left: 20px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
}

body.k404-portfolio-page .header .menu-desktop .menu a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: currentColor;
	transform: translateY(-50%) scale(0.45);
	transform-origin: center;
	opacity: 0.22;
	transition: transform var(--home-transition), opacity var(--home-transition), background-color var(--home-transition);
}

body.k404-portfolio-page .header .menu-desktop .menu .current-menu-item a::before,
body.k404-portfolio-page .header .menu-desktop .menu a:hover::before,
body.k404-portfolio-page .header .menu-desktop .menu a:focus-visible::before {
	background: var(--home-spectrum-current);
	opacity: 1;
	transform: translateY(-50%) scale(1);
}

body.k404-portfolio-page .header .col-right {
	justify-content: flex-end;
	gap: 16px;
}

body.k404-portfolio-page .header .header-code {
	color: var(--home-spectrum-current);
}

body.k404-portfolio-page .site-mark {
	font-size: clamp(18px, 1.2vw, 22px);
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

body.k404-portfolio-page .elastic-fields .section {
	background: #fff;
}

body.k404-portfolio-page .elastic-fields :is(.text-editor p, .text p) {
	margin: 0;
	font-size: clamp(18px, 1.15vw, 22px);
	line-height: 1.45;
	letter-spacing: -0.02em;
	color: #101010;
}

body.k404-portfolio-page .elastic-fields :is(.title-wrapper h1, .title-wrapper h2, .title-wrapper h4) {
	margin: 0;
	color: #101010;
	letter-spacing: -0.07em;
}

body.k404-portfolio-page .elastic-fields .dopisek,
body.k404-portfolio-page .elastic-fields .support-wrapper > .dopisek {
	color: var(--home-spectrum-current);
	font-size: clamp(13px, 0.9vw, 16px);
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

#portfolio-archive-hero.section {
	padding-top: var(--portfolio-archive-top-space);
	padding-bottom: var(--portfolio-archive-title-bottom);
}

#portfolio-archive-hero.section .section-content {
	max-width: 878px;
}

#portfolio-archive-hero.section .title-wrapper h1 {
	font-size: 40px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
	text-wrap: balance;
}

#portfolio-archive-grid.section {
	padding-bottom: 0;
}

#portfolio-archive-grid.section .section-content {
	border-bottom: 1px solid rgba(16, 16, 16, 0.14);
	padding-bottom: var(--portfolio-archive-section-bottom);
}

#portfolio-archive-grid.section .portfolio-archive-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 30px;
	row-gap: var(--portfolio-archive-grid-row-gap);
}

#portfolio-archive-grid.section .portfolio-archive-empty {
	grid-column: 1 / -1;
	padding-block: 40px;
}

#portfolio-archive-grid.section .portfolio-card {
	display: grid;
	align-content: start;
	row-gap: 20px;
}

body.k404-portfolio-archive .portfolio-card .post-thumbnail {
	position: relative;
	overflow: hidden;
	background: rgba(16, 16, 16, 0.06);
}

body.k404-portfolio-archive .portfolio-card .post-thumbnail a,
body.k404-portfolio-page #section-10.section .post-thumbnail a {
	display: block;
}

body.k404-portfolio-archive .portfolio-card .post-thumbnail img,
body.k404-portfolio-page #section-10.section .post-thumbnail img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 745 / 409;
	object-fit: cover;
	transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.k404-portfolio-archive .portfolio-card:hover .post-thumbnail img,
body.k404-portfolio-archive .portfolio-card:focus-within .post-thumbnail img {
	transform: scale(1.025);
}

body.k404-portfolio-archive .portfolio-card .meta,
body.k404-portfolio-page #section-10.section .meta {
	display: grid;
	gap: 0;
	padding-top: 0;
}

body.k404-portfolio-archive .portfolio-card .portfolio-meta {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px;
}

body.k404-portfolio-archive .portfolio-card .post-title,
body.k404-portfolio-archive .portfolio-card .portfolio-meta .dopisek {
	display: block !important;
}

body.k404-portfolio-archive .portfolio-card .post-title h5,
body.k404-portfolio-page #section-10.section .post-title h5,
body.k404-portfolio-page #section-10.section .post-title h4 {
	margin: 0;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0;
}

body.k404-portfolio-archive .portfolio-card .portfolio-meta .dopisek {
	margin: 0;
	color: var(--home-spectrum-current);
	font-size: 14px;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
}

body.k404-portfolio-archive .portfolio-card .portfolio-meta .dopisek span::before {
	content: "[projekt: ";
}

body.k404-portfolio-archive .portfolio-card .portfolio-meta .dopisek span::after {
	content: "]";
}

#section-12.section,
#section-15.section,
#section-13.section,
#section-14.section,
#section-19.section,
#section-16.section,
#section-18.section,
#section-10.section {
	padding-bottom: clamp(54px, 6vw, 96px);
}

#section-12.section {
	padding-top: clamp(132px, 14vw, 190px);
}

#section-12.section .section-content {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.7fr);
	gap: clamp(26px, 3vw, 44px);
}

#section-12.section .col-top {
	grid-column: 1 / -1;
}

#section-12.section .image-wrapper img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1.82;
	object-fit: cover;
}

#section-12.section .col-left {
	display: grid;
	gap: clamp(18px, 2vw, 28px);
	max-width: 58rem;
}

#section-12.section .support-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
	align-items: center;
}

#section-12.section .nazwa h5 {
	margin: 0;
	font-size: clamp(18px, 1.25vw, 22px);
	font-weight: 500;
	letter-spacing: -0.03em;
}

#section-12.section .title-wrapper h2 {
	font-size: clamp(46px, 5.3vw, 88px);
	line-height: 0.9;
}

#section-12.section .col-right {
	display: flex;
	align-items: end;
	justify-content: end;
}

#section-12.section .logo {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(96px, 10vw, 160px);
	padding: clamp(22px, 2vw, 30px);
	border: 1px solid rgba(16, 16, 16, 0.16);
}

#section-12.section .logo img {
	max-width: min(100%, 180px);
	height: auto;
}

#section-12.section .portfolio-logo-mark {
	font-size: clamp(22px, 2vw, 32px);
	font-weight: 800;
	letter-spacing: 0.12em;
}

#section-12.section .col-bottom {
	grid-column: 1 / -1;
}

#section-15.section .section-content,
#section-19.section .section-content {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(28px, 3vw, 52px);
	align-items: center;
}

#section-15.section .image-wrapper img,
#section-19.section .image-wrapper img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1.05;
	object-fit: cover;
}

#section-15.section .title-wrapper h4,
#section-19.section .title-wrapper h4 {
	font-size: clamp(34px, 3.6vw, 58px);
	line-height: 0.95;
}

#section-13.section .section-content,
#section-18.section .punkty {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(22px, 2vw, 34px);
}

#section-13.section .item,
#section-18.section .item {
	display: grid;
	gap: 18px;
	padding-top: 20px;
	border-top: 1px solid rgba(16, 16, 16, 0.12);
}

#section-13.section .title-wrapper h4 {
	font-size: clamp(24px, 2vw, 34px);
	line-height: 1;
}

#section-14.section .section-content {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(22px, 2vw, 34px);
}

#section-14.section .image-wrapper img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1.08;
	object-fit: cover;
}

#section-16.section .section-content {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(22px, 2vw, 34px);
}

#section-16.section a {
	display: block;
}

#section-16.section img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1.1;
	object-fit: cover;
}

#section-18.section .title-wrapper h2 {
	font-size: clamp(40px, 4vw, 70px);
	line-height: 0.9;
	color: var(--home-spectrum-current);
}

#section-10.section .section-content {
	display: grid;
	gap: clamp(24px, 2.5vw, 40px);
}

#section-10.section .col-top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 20px;
	align-items: end;
}

#section-10.section .support-wrapper {
	display: grid;
	gap: 12px;
}

#section-10.section .title-wrapper h2 {
	font-size: clamp(40px, 4.2vw, 74px);
	line-height: 0.94;
}

#section-5.section {
	padding: 0;
}

#section-5.section .section-width {
	max-width: none;
	padding-inline: 0;
}

#section-5.section .section-content {
	min-height: clamp(420px, 58vh, 560px);
	padding: clamp(72px, 8vw, 110px) clamp(20px, 5vw, 40px);
	background: var(--section-surface, #ff8d2f);
	display: grid;
	align-content: center;
	justify-items: center;
	gap: clamp(16px, 2vw, 28px);
	text-align: center;
}

#section-5.section .title-wrapper h2 {
	font-size: clamp(46px, 5.2vw, 82px);
	line-height: 0.92;
}

#section-5.section .text-editor {
	width: min(100%, 980px);
}

body.k404-portfolio-page {
	--portfolio-gap-story: clamp(14.8837px, calc(4.6512vw), 20px);
	--portfolio-gap-major: clamp(38.6977px, calc(12.093vw), 52px);
	--portfolio-gap-feature: clamp(44.6512px, calc(13.9535vw), 60px);
	--portfolio-gap-share: clamp(53.5814px, calc(16.7442vw), 72px);
	--portfolio-gap-cta: clamp(71.4419px, calc(22.3256vw), 96px);
	--portfolio-text-width: min(100%, 874px);
	--portfolio-detail-width: min(100%, 490px);
}

@media (min-width: 430px) {
	body.k404-portfolio-page {
		--portfolio-gap-story: clamp(20px, calc(16.3248px + 0.8547vw), 30px);
		--portfolio-gap-major: clamp(52px, calc(45.3846px + 1.5385vw), 70px);
		--portfolio-gap-feature: clamp(60px, calc(53.0171px + 1.6239vw), 79px);
		--portfolio-gap-share: clamp(72px, calc(61.7094px + 2.3932vw), 100px);
		--portfolio-gap-cta: clamp(96px, calc(72.8462px + 5.3846vw), 159px);
	}
}

@media (min-width: 1600px) {
	body.k404-portfolio-page {
		--portfolio-gap-story: clamp(30px, calc(1.875vw), 36px);
		--portfolio-gap-major: clamp(70px, calc(4.375vw), 84px);
		--portfolio-gap-feature: clamp(79px, calc(4.9375vw), 94.8px);
		--portfolio-gap-share: clamp(100px, calc(6.25vw), 120px);
		--portfolio-gap-cta: clamp(159px, calc(9.9375vw), 190.8px);
	}
}

body.k404-portfolio-page .elastic-fields :is(.text-editor p, .text p) {
	font-size: clamp(14px, 0.1709vw + 13.265px, 16px);
	line-height: 1.3;
	letter-spacing: -0.02em;
}

body.k404-portfolio-page .elastic-fields :is(.title-wrapper h1, .title-wrapper h2, .title-wrapper h4) {
	letter-spacing: -0.02em;
}

#section-12.section {
	padding-top: 0;
	padding-bottom: var(--portfolio-gap-major);
}

#section-20.section {
	padding-bottom: var(--portfolio-gap-major);
}

#section-13.section {
	padding-bottom: var(--portfolio-gap-feature);
}

#section-14.section,
#section-15.section,
#section-19.section,
#section-21.section {
	padding-bottom: var(--portfolio-gap-story);
}

#section-16.section {
	padding-bottom: var(--portfolio-gap-share);
}

#section-22.section {
	padding-bottom: clamp(54px, 4.5vw, 72px);
}

#section-10.section {
	padding-bottom: var(--portfolio-gap-cta);
}

#section-12.section .section-content {
	display: grid;
	grid-template-columns: minmax(0, 874px) auto;
	justify-content: space-between;
	row-gap: 0;
	column-gap: clamp(24px, 4vw, 60px);
}

#section-12.section .col-top {
	grid-column: 1 / -1;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-bottom: clamp(36px, 4vw, 60px);
}

#section-12.section .col-top .image-wrapper img {
	aspect-ratio: 1600 / 650;
}

#section-12.section .col-left {
	display: grid;
	gap: clamp(24px, 2.7vw, 40px);
	max-width: 874px;
}

#section-12.section .title-wrapper h2 {
	font-size: clamp(28px, 2.0513vw + 19.1795px, 40px);
	line-height: 1.2;
}

#section-12.section .text-editor {
	max-width: 874px;
}

#section-12.section .text-editor p,
#section-20.section .text-editor p,
#section-5.section .text-editor p {
	font-size: clamp(20px, 1.7094vw + 12.6453px, 30px);
	line-height: 1.3;
}

#section-12.section .col-right {
	align-self: start;
	justify-self: end;
}

#section-12.section .logo {
	min-height: auto;
	padding: 0;
	border: 0;
	background: transparent;
	justify-content: flex-end;
}

#section-12.section .logo img {
	max-width: min(100%, 203px);
}

#section-12.section .portfolio-logo-mark {
	font-size: clamp(28px, 2.0513vw + 19.1795px, 40px);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.2;
	text-align: right;
}

#section-12.section .col-bottom {
	grid-column: 1;
	margin-top: clamp(32px, 3vw, 50px);
}

#section-12.section .col-bottom-image {
	grid-column: 1 / -1;
	margin-top: clamp(56px, 6vw, 100px);
}

#section-12.section .col-bottom-image .image-wrapper img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1520 / 834;
	object-fit: cover;
}

#section-20.section .section-content {
	width: var(--portfolio-text-width);
}

#section-13.features .section-content {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(20px, 3.9vw, 61px);
}

#section-13.features .item {
	display: grid;
	gap: clamp(18px, 1.5vw, 23px);
	padding-top: 0;
	border-top: 0;
}

#section-13.features .portfolio-feature-dot {
	display: block;
	width: clamp(14px, 0.5128vw + 11.7949px, 17px);
	height: clamp(14px, 0.5128vw + 11.7949px, 17px);
	border-radius: 999px;
	background: #101010;
}

#section-13.features .title-wrapper h4,
#section-14.stacked_text .title-wrapper h4,
#section-15.section .title-wrapper h4,
#section-19.section .title-wrapper h4 {
	font-size: clamp(20px, 0.8547vw + 16.3248px, 25px);
	line-height: 1.2;
}

#section-13.section:not(.features) .section-content,
#section-18.section .punkty {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(22px, 2vw, 34px);
}

#section-13.section:not(.features) .item,
#section-18.section .item {
	display: grid;
	gap: 18px;
	padding-top: 20px;
	border-top: 1px solid rgba(16, 16, 16, 0.12);
}

#section-13.section:not(.features) .title-wrapper h4 {
	font-size: clamp(24px, 2vw, 34px);
	line-height: 1;
}

#section-14.grid .section-content {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--portfolio-gap-story);
}

#section-14.grid .image-wrapper img,
#section-14.stacked_text .col-left .image-wrapper img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 745 / 409;
	object-fit: cover;
}

#section-14.stacked_text .section-content {
	display: grid;
	grid-template-columns: minmax(0, 745px) minmax(280px, 490px);
	justify-content: space-between;
	column-gap: clamp(30px, 6vw, 96px);
	align-items: center;
}

#section-14.stacked_text .col-left {
	display: grid;
	gap: var(--portfolio-gap-story);
}

#section-14.stacked_text .col-right,
#section-15.section .col-right,
#section-19.section .col-left {
	display: grid;
	gap: clamp(23px, 2vw, 30px);
	max-width: var(--portfolio-detail-width);
}

#section-15.section .section-content {
	display: grid;
	grid-template-columns: minmax(0, 745px) minmax(280px, 490px);
	justify-content: space-between;
	column-gap: clamp(30px, 6vw, 96px);
	align-items: center;
}

#section-19.section .section-content {
	display: grid;
	grid-template-columns: minmax(280px, 490px) minmax(0, 745px);
	justify-content: space-between;
	column-gap: clamp(30px, 6vw, 96px);
	align-items: center;
}

#section-15.section .image-wrapper img,
#section-19.section .image-wrapper img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 745 / 834;
	object-fit: cover;
}

#section-21.section .image-wrapper img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1520 / 834;
	object-fit: cover;
}

#section-16.grid .section-content {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--portfolio-gap-story);
}

#section-16.mosaic .section-content {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--portfolio-gap-story);
}

#section-16.mosaic img {
	aspect-ratio: 1;
}

#section-16.section img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

#section-22.section .section-content {
	display: grid;
	justify-items: center;
	gap: clamp(34px, 4vw, 45px);
	padding-bottom: clamp(54px, 4.5vw, 72px);
	border-bottom: 1px solid rgba(16, 16, 16, 0.12);
}

#section-22.section .title-wrapper {
	width: min(100%, 1004px);
}

#section-22.section .title-wrapper h2 {
	font-size: clamp(28px, 2.0513vw + 19.1795px, 40px);
	line-height: 1.2;
	text-align: center;
}

#section-22.section .share-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0;
}

#section-22.section .share-buttons .home-ui-pill {
	background: #fff;
	backdrop-filter: none;
}

#section-22.section .share-buttons .home-ui-pill + .home-ui-pill {
	margin-left: -1px;
}

#section-10.section .section-content {
	display: grid;
	gap: clamp(48px, 5vw, 88px);
}

#section-10.section .col-top {
	display: grid;
	grid-template-columns: minmax(0, 681px) auto;
	justify-content: space-between;
	gap: clamp(24px, 3vw, 40px);
	align-items: start;
}

#section-10.section .support-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 15px;
}

#section-10.section .title-wrapper h2,
#section-5.section .title-wrapper h2 {
	font-size: clamp(28px, 2.0513vw + 19.1795px, 40px);
	line-height: 1.2;
}

#section-10.section .dopisek {
	font-size: clamp(12px, 0.3419vw + 10.5299px, 14px);
	line-height: 1.3;
	letter-spacing: -0.02em;
	text-transform: none;
}

#section-10.section .posts-shell {
	display: grid;
	gap: clamp(36px, 3vw, 45px);
}

#section-10.section .posts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--portfolio-gap-story);
}

#section-10.section .post-thumbnail img {
	aspect-ratio: 745 / 409;
}

#section-10.section .meta {
	gap: 6px;
	padding-top: 20px;
}

#section-10.section .portfolio-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

#section-10.section .post-title h5,
#section-10.section .post-title h4 {
	font-size: clamp(18px, 0.3419vw + 16.5299px, 20px);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.02em;
}

body.k404-portfolio-page #section-10.section .portfolio-meta .dopisek {
	color: var(--home-spectrum-current);
}

body.k404-portfolio-page #section-10.section .portfolio-meta .dopisek span::before {
	content: "[projekt: ";
}

body.k404-portfolio-page #section-10.section .portfolio-meta .dopisek span::after {
	content: "]";
}

#section-5.section {
	padding: 0 0 clamp(64px, 6vw, 90px);
}

#section-5.section .section-width {
	width: min(calc(100% - (2 * var(--home-gutter))), 1004px);
	padding-inline: 0;
}

#section-5.section .section-content {
	min-height: auto;
	padding: 0;
	background: transparent;
	display: grid;
	gap: clamp(34px, 4vw, 50px);
	text-align: center;
}

#section-5.section .text-editor {
	width: min(100%, 1004px);
}

body.k404-portfolio-archive #section-5.section.portfolio-archive-consultation {
	padding-bottom: 0;
	padding-top: var(--portfolio-archive-cta-top);
}

body.k404-portfolio-archive #section-5.section.portfolio-archive-consultation .section-width {
	width: min(calc(100% - (2 * var(--home-gutter))), 1004px);
}

body.k404-portfolio-archive #section-5.section.portfolio-archive-consultation .section-content {
	gap: 30px;
	padding: 0 0 var(--portfolio-archive-section-bottom);
	border-bottom: 0;
}

body.k404-portfolio-archive #section-5.section.portfolio-archive-consultation .title-wrapper h2 {
	font-size: 40px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
}

body.k404-portfolio-archive #section-5.section.portfolio-archive-consultation .text-editor p {
	margin: 0;
	font-size: 20px;
	line-height: 1.3;
	letter-spacing: 0;
}

.single-default {
	padding: 140px 0 80px;
}

.single-default-article {
	max-width: 840px;
	margin: 0 auto;
}

.single-default-header h1 {
	font-size: clamp(38px, 4vw, 62px);
	line-height: 0.96;
	letter-spacing: -0.06em;
}

@keyframes k404-button-fill-sequence {
	0% { background-color: var(--home-button-fill-red); }
	20% { background-color: var(--home-button-fill-orange); }
	40% { background-color: var(--home-button-fill-yellow); }
	60% { background-color: var(--home-button-fill-blue); }
	80% { background-color: var(--home-button-fill-indigo); }
	100% { background-color: var(--home-button-fill-red); }
}

@media (max-width: 991px) {
	body.k404-portfolio-page {
		padding-bottom: 88px;
	}

	body.k404-portfolio-page .home-top-controls {
		padding-top: 14px;
	}

	body.k404-portfolio-page .home-top-controls .section-width {
		display: grid;
		gap: 10px;
	}

	body.k404-portfolio-page .home-top-left,
	body.k404-portfolio-page .home-top-right {
		gap: 8px;
	}

	body.k404-portfolio-page .home-top-right {
		overflow-x: auto;
		scrollbar-width: none;
	}

	body.k404-portfolio-page .home-top-right::-webkit-scrollbar {
		display: none;
	}

	body.k404-portfolio-page .home-ui-pill {
		min-height: 44px;
		padding-inline: 18px;
		font-size: 13px;
		white-space: nowrap;
	}

	body.k404-portfolio-page .header.home-bottom-nav {
		grid-template-columns: 1fr;
		gap: 10px;
		height: auto;
		padding: 0 20px;
	}

	body.k404-portfolio-page .header.home-bottom-nav .col-left {
		order: 2;
		overflow-x: auto;
		scrollbar-width: none;
	}

	body.k404-portfolio-page .header.home-bottom-nav .col-left::-webkit-scrollbar {
		display: none;
	}

	body.k404-portfolio-page .header.home-bottom-nav .col-right {
		display: none;
	}

	body.k404-portfolio-page .header .menu-desktop .menu {
		gap: 14px;
		white-space: nowrap;
	}

	body.k404-portfolio-page .site-mark {
		font-size: 20px;
	}

	#portfolio-archive-hero.section {
		padding-top: var(--portfolio-archive-top-space);
	}

	body.k404-portfolio-archive #portfolio-archive-hero.section .title-wrapper h1 {
		font-size: 28px;
		line-height: 1.2;
		letter-spacing: 0;
	}

	#portfolio-archive-hero.section .support-wrapper,
	#section-10.section .col-top,
	#section-12.section .section-content,
	#section-15.section .section-content,
	#section-19.section .section-content {
		grid-template-columns: 1fr;
	}

	#portfolio-archive-grid.section .portfolio-archive-grid,
	#section-10.section .posts,
	#section-13.section .section-content,
	#section-14.section .section-content,
	#section-16.section .section-content,
	#section-18.section .punkty {
		grid-template-columns: 1fr;
	}

	#section-12.section .col-right {
		justify-content: start;
	}

	#section-12.section .title-wrapper h2 {
		font-size: clamp(38px, 11vw, 58px);
	}

	#section-5.section .section-content {
		min-height: auto;
		padding: 78px 20px;
	}

	#section-5.section .title-wrapper h2 {
		font-size: clamp(40px, 12vw, 56px);
	}

	#section-12.section .section-content,
	#section-14.stacked_text .section-content,
	#section-15.section .section-content,
	#section-19.section .section-content,
	#section-10.section .col-top {
		grid-template-columns: 1fr;
	}

	#section-12.section .col-top {
		margin-bottom: clamp(28px, 8vw, 40px);
	}

	#section-12.section .col-top .image-wrapper img {
		aspect-ratio: 430 / 300;
	}

	#section-12.section .col-right {
		justify-self: start;
	}

	#section-12.section .portfolio-logo-mark {
		text-align: left;
	}

	#section-12.section .col-bottom {
		margin-top: clamp(28px, 7vw, 40px);
	}

	#section-12.section .col-bottom-image {
		margin-top: clamp(44px, 10vw, 64px);
	}

	#section-12.section .col-bottom-image .image-wrapper img,
	#section-21.section .image-wrapper img {
		aspect-ratio: 430 / 236;
	}

	#section-13.features .section-content,
	#section-18.section .punkty {
		grid-template-columns: 1fr;
	}

	#section-14.grid .section-content,
	#section-16.grid .section-content {
		grid-template-columns: 1fr;
	}

	#section-16.mosaic .section-content {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	#section-20.section .text-editor p,
	#section-12.section .text-editor p,
	#section-5.section .text-editor p {
		font-size: clamp(18px, 5.2vw, 22px);
	}

	#section-22.section .section-content {
		gap: 28px;
		padding-bottom: 54px;
	}

	#section-22.section .title-wrapper h2,
	#section-10.section .title-wrapper h2,
	#section-5.section .title-wrapper h2 {
		font-size: clamp(34px, 9vw, 40px);
	}

	#section-22.section .share-buttons {
		justify-content: flex-start;
		gap: 8px;
	}

	#section-22.section .share-buttons .home-ui-pill + .home-ui-pill {
		margin-left: 0;
	}

	#section-10.section .support-wrapper {
		flex-direction: column;
		gap: 10px;
	}

	#section-5.section .section-content {
		padding: 0;
		gap: 28px;
	}

	body.k404-portfolio-archive #section-5.section.portfolio-archive-consultation .section-content {
		padding: 0 0 var(--portfolio-archive-section-bottom);
		gap: 28px;
	}

	body.k404-portfolio-archive #section-5.section.portfolio-archive-consultation .title-wrapper h2 {
		font-size: 28px;
		line-height: 1.2;
		letter-spacing: 0;
	}

	body.k404-portfolio-archive .portfolio-card .post-title h5 {
		font-size: 18px;
		letter-spacing: 0;
	}

	body.k404-portfolio-archive .portfolio-card .portfolio-meta .dopisek {
		font-size: 13px;
		letter-spacing: 0;
	}
}

/* Fixed header social slots */
body.k404-portfolio-page .header.home-bottom-nav .col-right {
	justify-content: flex-end;
}

body.k404-portfolio-page .header.home-bottom-nav .home-socials {
	display: grid;
	grid-template-columns: max-content max-content max-content 7.8ch;
	align-items: center;
	justify-content: end;
	justify-items: start;
	column-gap: clamp(10px, 0.8vw, 16px);
	width: max-content;
	margin-left: auto;
}

body.k404-portfolio-page .header.home-bottom-nav .home-socials a,
body.k404-portfolio-page .header.home-bottom-nav .home-socials .header-code {
	display: block;
	white-space: nowrap;
}

body.k404-portfolio-page .header.home-bottom-nav .home-socials .header-code {
	width: 7.8ch;
	min-width: 7.8ch;
	text-align: left;
	font-variant-numeric: tabular-nums;
}

/* Portfolio single Figma alignment */
body.k404-portfolio-single {
	--portfolio-single-copy-wide: min(100%, 878px);
	--portfolio-single-copy-narrow: min(100%, 490px);
	--portfolio-single-half-column: calc((100% - var(--portfolio-single-grid-gap)) / 2);
	--portfolio-single-pair-image: minmax(0, var(--portfolio-single-half-column));
	--portfolio-single-pair-text: minmax(280px, 490px);
	--portfolio-single-pair-gap: clamp(32px, 10.0625vw, 161px);
	--portfolio-single-reverse-offset: clamp(0px, 8vw, 128px);
	--portfolio-single-reverse-gap: clamp(30px, calc(100% - var(--portfolio-single-reverse-offset) - 490px - var(--portfolio-single-half-column)), 157px);
	--portfolio-single-grid-gap: clamp(18px, 1.875vw, 30px);
	--portfolio-single-title-gap: clamp(28px, 2.5vw, 40px);
	--portfolio-single-section-gap: clamp(44px, 3.75vw, 60px);
	--portfolio-single-feature-gap: clamp(54px, 4.9375vw, 79px);
	--portfolio-single-share-gap: clamp(70px, 6.25vw, 100px);
}

body.k404-portfolio-single .elastic-fields :is(.text-editor, .text-editor p, .text, .text p) {
	max-width: none;
}

body.k404-portfolio-single .elastic-fields :is(.text-editor p, .text p) {
	margin: 0;
	color: #101010;
}

body.k404-portfolio-single .elastic-fields > .section > .section-width {
	padding: 0;
}

body.k404-portfolio-single #section-12.section {
	padding-top: 0;
	padding-bottom: var(--portfolio-single-section-gap);
}

body.k404-portfolio-single #section-12.section .section-content {
	display: grid;
	grid-template-columns: minmax(0, 878px) var(--portfolio-single-pair-text);
	justify-content: space-between;
	align-items: start;
	column-gap: clamp(36px, 5vw, 80px);
	row-gap: 0;
}

body.k404-portfolio-single #section-12.section .col-top {
	grid-column: 1 / -1;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-bottom: var(--portfolio-single-section-gap);
}

body.k404-portfolio-single #section-12.section .col-top .image-wrapper img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1600 / 650;
	object-fit: cover;
}

body.k404-portfolio-single #section-12.section .col-left {
	display: grid;
	gap: var(--portfolio-single-title-gap);
	width: var(--portfolio-single-copy-wide);
	max-width: 878px;
}

body.k404-portfolio-single #section-12.section .title-wrapper h2,
body.k404-portfolio-single #section-22.section .title-wrapper h2,
body.k404-portfolio-single #section-10.section .title-wrapper h2,
body.k404-portfolio-single #section-5.section .title-wrapper h2 {
	font-size: clamp(28px, 2.5vw, 40px);
	line-height: 1.2;
	letter-spacing: -0.02em;
	font-weight: 400;
}

body.k404-portfolio-single #section-12.section .text-editor p,
body.k404-portfolio-single #section-20.section .text-editor p,
body.k404-portfolio-single #section-5.section .text-editor p {
	font-size: clamp(20px, 1.875vw, 30px);
	line-height: 1.3;
	letter-spacing: -0.02em;
}

body.k404-portfolio-single #section-12.section .col-right {
	justify-self: end;
	align-self: start;
	width: var(--portfolio-single-copy-narrow);
}

body.k404-portfolio-single #section-12.section .logo {
	display: flex;
	justify-content: flex-end;
	min-height: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

body.k404-portfolio-single #section-12.section .portfolio-logo-mark {
	font-size: clamp(28px, 2.5vw, 40px);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.02em;
	text-align: right;
}

body.k404-portfolio-single #section-12.section .col-bottom {
	grid-column: 1;
	margin-top: clamp(36px, 3.125vw, 50px);
}

body.k404-portfolio-single #section-12.section .col-bottom-image {
	grid-column: 1 / -1;
	margin-top: clamp(58px, 6.25vw, 100px);
}

body.k404-portfolio-single #section-12.section .col-bottom-image .image-wrapper img,
body.k404-portfolio-single #section-21.section .image-wrapper img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1520 / 834;
	object-fit: cover;
}

body.k404-portfolio-single #section-20.section {
	padding-bottom: var(--portfolio-single-feature-gap);
}

body.k404-portfolio-single #section-20.section .section-content {
	width: var(--portfolio-single-copy-wide);
	max-width: 878px;
	margin-inline: 0 auto;
}

body.k404-portfolio-single #section-13.features {
	padding-bottom: var(--portfolio-single-feature-gap);
}

body.k404-portfolio-single #section-13.features .section-content {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: clamp(24px, 2.75vw, 44px);
	row-gap: var(--portfolio-single-grid-gap);
}

body.k404-portfolio-single #section-13.features .item {
	display: grid;
	grid-template-columns: 17px minmax(0, 1fr);
	column-gap: 15px;
	row-gap: 23px;
	align-items: start;
	padding-top: 0;
	border-top: 0;
}

body.k404-portfolio-single #section-13.features .portfolio-feature-dot {
	grid-column: 1;
	grid-row: 1;
	width: 17px;
	height: 17px;
	margin-top: 1px;
	border-radius: 999px;
	background: var(--home-spectrum-current);
}

body.k404-portfolio-single #section-13.features .title-wrapper,
body.k404-portfolio-single #section-13.features .text {
	grid-column: 2;
}

body.k404-portfolio-single #section-13.features .title-wrapper h4,
body.k404-portfolio-single :is(#section-14.stacked_text, #section-15.section, #section-19.section) .title-wrapper h4 {
	font-size: clamp(20px, 1.5625vw, 25px);
	line-height: 1.2;
	letter-spacing: -0.02em;
	font-weight: 400;
}

body.k404-portfolio-single :is(#section-14.section, #section-15.section, #section-19.section, #section-21.section) {
	padding-bottom: var(--portfolio-single-grid-gap);
}

body.k404-portfolio-single #section-14.grid .section-content,
body.k404-portfolio-single #section-16.grid .section-content {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--portfolio-single-grid-gap);
}

body.k404-portfolio-single #section-14.grid .image-wrapper img,
body.k404-portfolio-single #section-16.grid .image-wrapper img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 745 / 409;
	object-fit: cover;
}

body.k404-portfolio-single :is(#section-14.stacked_text, #section-15.section) .section-content {
	display: grid;
	grid-template-columns: var(--portfolio-single-pair-image) var(--portfolio-single-pair-text);
	justify-content: start;
	column-gap: var(--portfolio-single-pair-gap);
	align-items: center;
}

body.k404-portfolio-single #section-19.section .section-content {
	display: grid;
	grid-template-columns: var(--portfolio-single-half-column) var(--portfolio-single-half-column);
	column-gap: var(--portfolio-single-grid-gap);
	align-items: center;
	padding-left: 0;
}

body.k404-portfolio-single #section-14.stacked_text .col-left {
	display: grid;
	gap: var(--portfolio-single-grid-gap);
}

body.k404-portfolio-single #section-14.stacked_text .col-right,
body.k404-portfolio-single #section-15.section .col-right,
body.k404-portfolio-single #section-19.section .col-left {
	display: grid;
	gap: 23px;
	width: var(--portfolio-single-copy-narrow);
	max-width: 490px;
}

body.k404-portfolio-single #section-19.section .col-left {
	margin-left: var(--portfolio-single-reverse-offset);
}

body.k404-portfolio-single #section-19.section .col-right {
	width: 100%;
}

body.k404-portfolio-single #section-14.stacked_text .col-left .image-wrapper img,
body.k404-portfolio-single #section-14.grid .image-wrapper img {
	aspect-ratio: 745 / 409;
}

body.k404-portfolio-single #section-15.section .image-wrapper img,
body.k404-portfolio-single #section-19.section .image-wrapper img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 745 / 834;
	object-fit: cover;
}

body.k404-portfolio-single #section-16.mosaic {
	padding-bottom: var(--portfolio-single-share-gap);
}

body.k404-portfolio-single #section-16.mosaic .section-content {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--portfolio-single-grid-gap);
}

body.k404-portfolio-single #section-16.mosaic img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
}

body.k404-portfolio-single #section-22.section {
	padding-bottom: clamp(54px, 4.5vw, 72px);
}

body.k404-portfolio-single #section-22.section .section-content {
	display: grid;
	justify-items: center;
	gap: clamp(34px, 2.8125vw, 45px);
	padding-bottom: clamp(54px, 4.5vw, 72px);
	border-bottom: 1px solid rgba(16, 16, 16, 0.12);
}

body.k404-portfolio-single #section-22.section .title-wrapper,
body.k404-portfolio-single #section-5.section .title-wrapper,
body.k404-portfolio-single #section-5.section .text-editor {
	width: min(100%, 1004px);
	max-width: 1004px;
}

body.k404-portfolio-single #section-22.section .title-wrapper h2,
body.k404-portfolio-single #section-5.section :is(.title-wrapper h2, .text-editor p) {
	text-align: center;
}

body.k404-portfolio-single #section-10.section {
	padding-bottom: var(--portfolio-single-share-gap);
}

body.k404-portfolio-single #section-10.section .section-content {
	display: grid;
	row-gap: clamp(35px, 2.8125vw, 45px);
	width: min(100%, var(--home-max-width));
	margin: 0;
}

body.k404-portfolio-single #section-10.section .col-top {
	display: grid;
	grid-template-columns: minmax(0, 760px) auto;
	justify-content: space-between;
	align-items: start;
	gap: 30px;
}

body.k404-portfolio-single #section-10.section .support-wrapper {
	display: flex;
	align-items: flex-start;
	flex-wrap: nowrap;
	gap: 15px;
}

body.k404-portfolio-single #section-10.section .button-section {
	justify-self: end;
}

body.k404-portfolio-single #section-10.section .button-section a {
	min-width: 224px;
}

body.k404-portfolio-single #section-10.section .posts-shell {
	display: grid;
	row-gap: 35px;
}

body.k404-portfolio-single #section-10.section .portfolio-viewport {
	width: 100%;
	overflow: hidden;
}

body.k404-portfolio-single #section-10.section .portfolio-rail.posts {
	display: flex;
	align-items: stretch;
	flex-wrap: nowrap;
	gap: var(--portfolio-single-grid-gap);
	width: 100%;
	margin: 0;
	transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

body.k404-portfolio-single #section-10.section .portfolio-card {
	height: auto;
	flex: 0 0 var(--portfolio-single-half-column);
	width: var(--portfolio-single-half-column);
	max-width: var(--portfolio-single-half-column);
}

body.k404-portfolio-single #section-10.section .post-item {
	display: grid;
	height: 100%;
	row-gap: 20px;
}

body.k404-portfolio-single #section-10.section .post-thumbnail {
	position: relative;
	overflow: hidden;
	background: rgba(16, 16, 16, 0.06);
	border-radius: 0 !important;
}

body.k404-portfolio-single #section-10.section .post-thumbnail a {
	display: block;
	border-radius: 0 !important;
}

body.k404-portfolio-single #section-10.section .post-thumbnail img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 745 / 409;
	object-fit: cover;
	border-radius: 0 !important;
}

body.k404-portfolio-single #section-10.section .meta {
	padding: 0;
}

body.k404-portfolio-single #section-10.section .portfolio-meta {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px;
}

body.k404-portfolio-single #section-10.section .post-title,
body.k404-portfolio-single #section-10.section .portfolio-meta .dopisek {
	display: block !important;
}

body.k404-portfolio-single #section-10.section .portfolio-meta .post-title h5 {
	margin: 0;
	font-size: clamp(18px, 1.25vw, 20px);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: #000;
}

body.k404-portfolio-single #section-10.section .portfolio-navigation {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 151px;
	width: 305px;
	max-width: 100%;
}

body.k404-portfolio-single #section-10.section .portfolio-arrow {
	position: relative;
	width: 77px;
	height: 14px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

body.k404-portfolio-single #section-10.section .portfolio-arrow-line {
	position: absolute;
	top: 50%;
	width: 77px;
	height: 1px;
	background: #101010;
	transform: translateY(-50%);
	transition: transform var(--home-transition), opacity var(--home-transition);
}

body.k404-portfolio-single #section-10.section .portfolio-arrow-prev .portfolio-arrow-line {
	left: 0;
}

body.k404-portfolio-single #section-10.section .portfolio-arrow-next .portfolio-arrow-line {
	right: 0;
}

body.k404-portfolio-single #section-10.section .portfolio-arrow::before {
	content: "";
	position: absolute;
	top: 50%;
	width: 10px;
	height: 10px;
	border-top: 1px solid #101010;
	transform: translateY(-50%);
	transition: transform var(--home-transition), opacity var(--home-transition);
}

body.k404-portfolio-single #section-10.section .portfolio-arrow-prev::before {
	left: 0;
	border-left: 1px solid #101010;
	transform: translateY(-50%) rotate(-45deg);
}

body.k404-portfolio-single #section-10.section .portfolio-arrow-next::before {
	right: 0;
	border-right: 1px solid #101010;
	transform: translateY(-50%) rotate(45deg);
}

body.k404-portfolio-single #section-10.section .portfolio-arrow:hover .portfolio-arrow-line,
body.k404-portfolio-single #section-10.section .portfolio-arrow:hover::before {
	opacity: 0.72;
}

body.k404-portfolio-single #section-10.section .portfolio-arrow:disabled,
body.k404-portfolio-single #section-10.section .portfolio-navigation[data-static-nav] .portfolio-arrow {
	opacity: 1;
	cursor: default;
}

body.k404-portfolio-single #section-10.section .portfolio-arrow:disabled .portfolio-arrow-line,
body.k404-portfolio-single #section-10.section .portfolio-arrow:disabled::before,
body.k404-portfolio-single #section-10.section .portfolio-navigation[data-static-nav] .portfolio-arrow .portfolio-arrow-line,
body.k404-portfolio-single #section-10.section .portfolio-navigation[data-static-nav] .portfolio-arrow::before {
	opacity: 1;
}

@media (min-width: 1200px) {
	body.k404-portfolio-single #section-13.features .section-content {
		grid-template-columns: repeat(4, minmax(0, 358px));
		justify-content: space-between;
		column-gap: 0;
	}
}

@media (max-width: 991px) {
	body.k404-portfolio-single {
		--portfolio-single-pair-gap: clamp(28px, 9vw, 40px);
		--portfolio-single-reverse-gap: clamp(28px, 9vw, 40px);
		--portfolio-single-reverse-offset: 0px;
	}

	body.k404-portfolio-single #section-12.section .section-content,
	body.k404-portfolio-single :is(#section-14.stacked_text, #section-15.section, #section-19.section) .section-content {
		grid-template-columns: 1fr;
		row-gap: var(--portfolio-single-grid-gap);
	}

	body.k404-portfolio-single #section-12.section .col-left,
	body.k404-portfolio-single #section-12.section .col-right,
	body.k404-portfolio-single #section-20.section .section-content,
	body.k404-portfolio-single #section-14.stacked_text .col-right,
	body.k404-portfolio-single #section-15.section .col-right,
	body.k404-portfolio-single #section-19.section .col-left {
		width: 100%;
		max-width: none;
	}

	body.k404-portfolio-single #section-12.section .col-top .image-wrapper img {
		aspect-ratio: 430 / 300;
	}

	body.k404-portfolio-single #section-13.features .section-content,
	body.k404-portfolio-single #section-14.grid .section-content,
	body.k404-portfolio-single #section-16.grid .section-content {
		grid-template-columns: 1fr;
	}

	body.k404-portfolio-single #section-16.mosaic .section-content {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	body.k404-portfolio-single #section-10.section .col-top {
		grid-template-columns: 1fr;
	}

	body.k404-portfolio-single #section-10.section .support-wrapper {
		flex-direction: column;
		gap: 10px;
	}

	body.k404-portfolio-single #section-10.section .button-section {
		justify-self: start;
	}

	body.k404-portfolio-single #section-10.section .portfolio-card {
		flex-basis: 100%;
		width: 100%;
		max-width: 100%;
	}

	body.k404-portfolio-single #section-10.section .portfolio-navigation {
		gap: 44px;
		width: auto;
	}

	body.k404-portfolio-single #section-10.section .portfolio-arrow,
	body.k404-portfolio-single #section-10.section .portfolio-arrow-line {
		width: 64px;
	}
}