.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/korean-beauty-drinks.webp"]) { --reference-image-background: linear-gradient(135deg, rgb(237 239 241), rgb(242 244 245)); background: var(--reference-image-background); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/korean-beauty-drinks.webp"]) { position: relative; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/korean-beauty-drinks.webp"])::before { content: ''; position: absolute; inset: 0; border: var(--reference-image-padding) solid transparent; border-image: url('../../../assets/images/referenssit/korean-beauty-drinks.webp') 1 stretch; pointer-events: none; filter: blur(2px); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/korean-beauty-drinks.webp"]) > img { height: auto; aspect-ratio: auto; background: transparent; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/sleek-design.png"]) { --reference-image-background: linear-gradient(135deg, rgb(243 243 243), rgb(247 248 248)); background: var(--reference-image-background); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/sleek-design.png"]) { position: relative; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/sleek-design.png"])::before { content: ''; position: absolute; inset: 0; border: var(--reference-image-padding) solid transparent; border-image: url('../../../assets/images/referenssit/sleek-design.png') 1 stretch; pointer-events: none; filter: blur(2px); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/sleek-design.png"]) > img { height: auto; aspect-ratio: auto; background: transparent; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/axarquia-mockup-web.webp"]) { --reference-image-background: linear-gradient(135deg, rgb(245 247 249), rgb(246 248 250)); background: var(--reference-image-background); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/axarquia-mockup-web.webp"]) { position: relative; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/axarquia-mockup-web.webp"])::before { content: ''; position: absolute; inset: 0; border: var(--reference-image-padding) solid transparent; border-image: url('../../../assets/images/referenssit/axarquia-mockup-web.webp') 1 stretch; pointer-events: none; filter: blur(2px); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/axarquia-mockup-web.webp"]) > img { height: auto; aspect-ratio: auto; background: transparent; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/camee-mockup-web.webp"]) { --reference-image-background: linear-gradient(135deg, rgb(248 250 251), rgb(248 250 251)); background: var(--reference-image-background); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/camee-mockup-web.webp"]) { position: relative; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/camee-mockup-web.webp"])::before { content: ''; position: absolute; inset: 0; border: var(--reference-image-padding) solid transparent; border-image: url('../../../assets/images/referenssit/camee-mockup-web.webp') 1 stretch; pointer-events: none; filter: blur(2px); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/camee-mockup-web.webp"]) > img { height: auto; aspect-ratio: auto; background: transparent; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/sahkomatti-mockup.png"]) { --reference-image-background: linear-gradient(135deg, rgb(253 253 253), rgb(252 251 252)); background: var(--reference-image-background); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/sahkomatti-mockup.png"]) { position: relative; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/sahkomatti-mockup.png"])::before { content: ''; position: absolute; inset: 0; border: var(--reference-image-padding) solid transparent; border-image: url('../../../assets/images/referenssit/sahkomatti-mockup.png') 1 stretch; pointer-events: none; filter: blur(2px); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/sahkomatti-mockup.png"]) > img { height: auto; aspect-ratio: auto; background: transparent; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/opiks.jpg"]) { --reference-image-background: linear-gradient(135deg, rgb(243 243 243), rgb(243 243 243)); background: var(--reference-image-background); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/opiks.jpg"]) { position: relative; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/opiks.jpg"])::before { content: ''; position: absolute; inset: 0; border: var(--reference-image-padding) solid transparent; border-image: url('../../../assets/images/referenssit/opiks.jpg') 1 stretch; pointer-events: none; filter: blur(2px); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/opiks.jpg"]) > img { height: auto; aspect-ratio: auto; background: transparent; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/verkkosivut/lapwall.jpg"]) { --reference-image-background: rgb(255 255 255); background: var(--reference-image-background); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/showcase/kurththune-woo.png"]) { --reference-image-background: linear-gradient(135deg, rgb(222 222 222), rgb(224 224 224)); background: var(--reference-image-background); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/showcase/kurththune-woo.png"]) { position: relative; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/showcase/kurththune-woo.png"])::before { content: ''; position: absolute; inset: 0; border: var(--reference-image-padding) solid transparent; border-image: url('../../../assets/images/showcase/kurththune-woo.png') 1 stretch; pointer-events: none; filter: blur(2px); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/showcase/kurththune-woo.png"]) > img { height: auto; aspect-ratio: auto; background: transparent; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/rakennusman.png"]) { --reference-image-background: linear-gradient(135deg, rgb(237 238 239), rgb(244 245 247)); background: var(--reference-image-background); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/rakennusman.png"]) { position: relative; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/rakennusman.png"])::before { content: ''; position: absolute; inset: 0; border: var(--reference-image-padding) solid transparent; border-image: url('../../../assets/images/referenssit/rakennusman.png') 1 stretch; pointer-events: none; filter: blur(2px); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/rakennusman.png"]) > img { height: auto; aspect-ratio: auto; background: transparent; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/naulankanta.png"]) { --reference-image-background: linear-gradient(135deg, rgb(247 247 249), rgb(254 253 254)); background: var(--reference-image-background); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/naulankanta.png"]) { position: relative; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/naulankanta.png"])::before { content: ''; position: absolute; inset: 0; border: var(--reference-image-padding) solid transparent; border-image: url('../../../assets/images/referenssit/naulankanta.png') 1 stretch; pointer-events: none; filter: blur(2px); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/naulankanta.png"]) > img { height: auto; aspect-ratio: auto; background: transparent; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/ebforum.png"]) { --reference-image-background: linear-gradient(135deg, rgb(244 245 246), rgb(246 247 248)); background: var(--reference-image-background); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/ebforum.png"]) { position: relative; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/ebforum.png"])::before { content: ''; position: absolute; inset: 0; border: var(--reference-image-padding) solid transparent; border-image: url('../../../assets/images/referenssit/ebforum.png') 1 stretch; pointer-events: none; filter: blur(2px); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/ebforum.png"]) > img { height: auto; aspect-ratio: auto; background: transparent; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/coeur-studios.png"]) { --reference-image-background: linear-gradient(135deg, rgb(243 244 245), rgb(248 248 250)); background: var(--reference-image-background); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/coeur-studios.png"]) { position: relative; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/coeur-studios.png"])::before { content: ''; position: absolute; inset: 0; border: var(--reference-image-padding) solid transparent; border-image: url('../../../assets/images/referenssit/coeur-studios.png') 1 stretch; pointer-events: none; filter: blur(2px); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/coeur-studios.png"]) > img { height: auto; aspect-ratio: auto; background: transparent; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/hoivasaatio-mockup.png"]) { --reference-image-background: linear-gradient(135deg, rgb(224 228 231), rgb(217 219 222)); background: var(--reference-image-background); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/hoivasaatio-mockup.png"]) { position: relative; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/hoivasaatio-mockup.png"])::before { content: ''; position: absolute; inset: 0; border: var(--reference-image-padding) solid transparent; border-image: url('../../../assets/images/referenssit/hoivasaatio-mockup.png') 1 stretch; pointer-events: none; filter: blur(2px); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/hoivasaatio-mockup.png"]) > img { height: auto; aspect-ratio: auto; background: transparent; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/jussuu-mockup.png"]) { --reference-image-background: linear-gradient(135deg, rgb(228 230 234), rgb(221 222 226)); background: var(--reference-image-background); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/jussuu-mockup.png"]) { position: relative; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/jussuu-mockup.png"])::before { content: ''; position: absolute; inset: 0; border: var(--reference-image-padding) solid transparent; border-image: url('../../../assets/images/referenssit/jussuu-mockup.png') 1 stretch; pointer-events: none; filter: blur(2px); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/jussuu-mockup.png"]) > img { height: auto; aspect-ratio: auto; background: transparent; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/visittohmajarvi-mockup.png"]) { --reference-image-background: linear-gradient(135deg, rgb(232 234 237), rgb(219 220 225)); background: var(--reference-image-background); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/visittohmajarvi-mockup.png"]) { position: relative; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/visittohmajarvi-mockup.png"])::before { content: ''; position: absolute; inset: 0; border: var(--reference-image-padding) solid transparent; border-image: url('../../../assets/images/referenssit/visittohmajarvi-mockup.png') 1 stretch; pointer-events: none; filter: blur(2px); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/visittohmajarvi-mockup.png"]) > img { height: auto; aspect-ratio: auto; background: transparent; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/sahkotekniikka-mockup.png"]) { --reference-image-background: linear-gradient(135deg, rgb(221 223 227), rgb(221 222 226)); background: var(--reference-image-background); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/sahkotekniikka-mockup.png"]) { position: relative; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/sahkotekniikka-mockup.png"])::before { content: ''; position: absolute; inset: 0; border: var(--reference-image-padding) solid transparent; border-image: url('../../../assets/images/referenssit/sahkotekniikka-mockup.png') 1 stretch; pointer-events: none; filter: blur(2px); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/sahkotekniikka-mockup.png"]) > img { height: auto; aspect-ratio: auto; background: transparent; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/liemi-mockup.png"]) { --reference-image-background: linear-gradient(135deg, rgb(253 253 253), rgb(248 249 250)); background: var(--reference-image-background); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/liemi-mockup.png"]) { position: relative; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/liemi-mockup.png"])::before { content: ''; position: absolute; inset: 0; border: var(--reference-image-padding) solid transparent; border-image: url('../../../assets/images/referenssit/liemi-mockup.png') 1 stretch; pointer-events: none; filter: blur(2px); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/liemi-mockup.png"]) > img { height: auto; aspect-ratio: auto; background: transparent; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/laatuvalo-mockup.png"]) { --reference-image-background: linear-gradient(135deg, rgb(250 250 251), rgb(249 249 250)); background: var(--reference-image-background); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/laatuvalo-mockup.png"]) { position: relative; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/laatuvalo-mockup.png"])::before { content: ''; position: absolute; inset: 0; border: var(--reference-image-padding) solid transparent; border-image: url('../../../assets/images/referenssit/laatuvalo-mockup.png') 1 stretch; pointer-events: none; filter: blur(2px); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/laatuvalo-mockup.png"]) > img { height: auto; aspect-ratio: auto; background: transparent; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/tikkurilanteatteri-mockup.png"]) { --reference-image-background: linear-gradient(135deg, rgb(239 241 241), rgb(252 252 252)); background: var(--reference-image-background); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/tikkurilanteatteri-mockup.png"]) { position: relative; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/tikkurilanteatteri-mockup.png"])::before { content: ''; position: absolute; inset: 0; border: var(--reference-image-padding) solid transparent; border-image: url('../../../assets/images/referenssit/tikkurilanteatteri-mockup.png') 1 stretch; pointer-events: none; filter: blur(2px); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/tikkurilanteatteri-mockup.png"]) > img { height: auto; aspect-ratio: auto; background: transparent; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/jousisahko-mockup.png"]) { --reference-image-background: linear-gradient(135deg, rgb(240 239 240), rgb(246 245 244)); background: var(--reference-image-background); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/jousisahko-mockup.png"]) { position: relative; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/jousisahko-mockup.png"])::before { content: ''; position: absolute; inset: 0; border: var(--reference-image-padding) solid transparent; border-image: url('../../../assets/images/referenssit/jousisahko-mockup.png') 1 stretch; pointer-events: none; filter: blur(2px); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/jousisahko-mockup.png"]) > img { height: auto; aspect-ratio: auto; background: transparent; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/hua-du-mockup.png"]) { --reference-image-background: linear-gradient(135deg, rgb(251 252 253), rgb(242 243 245)); background: var(--reference-image-background); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/hua-du-mockup.png"]) { position: relative; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/hua-du-mockup.png"])::before { content: ''; position: absolute; inset: 0; border: var(--reference-image-padding) solid transparent; border-image: url('../../../assets/images/referenssit/hua-du-mockup.png') 1 stretch; pointer-events: none; filter: blur(2px); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/hua-du-mockup.png"]) > img { height: auto; aspect-ratio: auto; background: transparent; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/villakka-mockup.png"]) { --reference-image-background: linear-gradient(135deg, rgb(249 249 250), rgb(253 252 253)); background: var(--reference-image-background); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/villakka-mockup.png"]) { position: relative; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/villakka-mockup.png"])::before { content: ''; position: absolute; inset: 0; border: var(--reference-image-padding) solid transparent; border-image: url('../../../assets/images/referenssit/villakka-mockup.png') 1 stretch; pointer-events: none; filter: blur(2px); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/villakka-mockup.png"]) > img { height: auto; aspect-ratio: auto; background: transparent; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/alleco-mockup.png"]) { --reference-image-background: linear-gradient(135deg, rgb(248 249 249), rgb(253 252 253)); background: var(--reference-image-background); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/alleco-mockup.png"]) { position: relative; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/alleco-mockup.png"])::before { content: ''; position: absolute; inset: 0; border: var(--reference-image-padding) solid transparent; border-image: url('../../../assets/images/referenssit/alleco-mockup.png') 1 stretch; pointer-events: none; filter: blur(2px); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/alleco-mockup.png"]) > img { height: auto; aspect-ratio: auto; background: transparent; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/harjattula-mockup.png"]) { --reference-image-background: linear-gradient(135deg, rgb(244 245 247), rgb(252 251 252)); background: var(--reference-image-background); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/harjattula-mockup.png"]) { position: relative; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/harjattula-mockup.png"])::before { content: ''; position: absolute; inset: 0; border: var(--reference-image-padding) solid transparent; border-image: url('../../../assets/images/referenssit/harjattula-mockup.png') 1 stretch; pointer-events: none; filter: blur(2px); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/harjattula-mockup.png"]) > img { height: auto; aspect-ratio: auto; background: transparent; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/valtamer-mockup.png"]) { --reference-image-background: linear-gradient(135deg, rgb(243 243 243), rgb(245 244 244)); background: var(--reference-image-background); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/valtamer-mockup.png"]) { position: relative; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/valtamer-mockup.png"])::before { content: ''; position: absolute; inset: 0; border: var(--reference-image-padding) solid transparent; border-image: url('../../../assets/images/referenssit/valtamer-mockup.png') 1 stretch; pointer-events: none; filter: blur(2px); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/valtamer-mockup.png"]) > img { height: auto; aspect-ratio: auto; background: transparent; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/larate-mockup.png"]) { --reference-image-background: linear-gradient(135deg, rgb(219 221 222), rgb(226 227 228)); background: var(--reference-image-background); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/larate-mockup.png"]) { position: relative; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/larate-mockup.png"])::before { content: ''; position: absolute; inset: 0; border: var(--reference-image-padding) solid transparent; border-image: url('../../../assets/images/referenssit/larate-mockup.png') 1 stretch; pointer-events: none; filter: blur(2px); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/larate-mockup.png"]) > img { height: auto; aspect-ratio: auto; background: transparent; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/sukoka-mockup.png"]) { --reference-image-background: linear-gradient(135deg, rgb(248 250 250), rgb(243 243 244)); background: var(--reference-image-background); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/sukoka-mockup.png"]) { position: relative; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/sukoka-mockup.png"])::before { content: ''; position: absolute; inset: 0; border: var(--reference-image-padding) solid transparent; border-image: url('../../../assets/images/referenssit/sukoka-mockup.png') 1 stretch; pointer-events: none; filter: blur(2px); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/sukoka-mockup.png"]) > img { height: auto; aspect-ratio: auto; background: transparent; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/mielenterveyshelmi-mockup.png"]) { --reference-image-background: linear-gradient(135deg, rgb(255 255 255), rgb(253 252 253)); background: var(--reference-image-background); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/mielenterveyshelmi-mockup.png"]) { position: relative; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/mielenterveyshelmi-mockup.png"])::before { content: ''; position: absolute; inset: 0; border: var(--reference-image-padding) solid transparent; border-image: url('../../../assets/images/referenssit/mielenterveyshelmi-mockup.png') 1 stretch; pointer-events: none; filter: blur(2px); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/mielenterveyshelmi-mockup.png"]) > img { height: auto; aspect-ratio: auto; background: transparent; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/lemmikkihotelli-web.webp"]) { --reference-image-background: rgb(255 255 255); background: var(--reference-image-background); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/turva-manager-mockup-web.webp"]) { --reference-image-background: linear-gradient(135deg, rgb(246 248 252), rgb(248 250 251)); background: var(--reference-image-background); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/turva-manager-mockup-web.webp"]) { position: relative; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/turva-manager-mockup-web.webp"])::before { content: ''; position: absolute; inset: 0; border: var(--reference-image-padding) solid transparent; border-image: url('../../../assets/images/referenssit/turva-manager-mockup-web.webp') 1 stretch; pointer-events: none; filter: blur(2px); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/turva-manager-mockup-web.webp"]) > img { height: auto; aspect-ratio: auto; background: transparent; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/contact-forum-mockup-web.webp"]) { --reference-image-background: linear-gradient(135deg, rgb(245 247 251), rgb(246 248 250)); background: var(--reference-image-background); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/contact-forum-mockup-web.webp"]) { position: relative; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/contact-forum-mockup-web.webp"])::before { content: ''; position: absolute; inset: 0; border: var(--reference-image-padding) solid transparent; border-image: url('../../../assets/images/referenssit/contact-forum-mockup-web.webp') 1 stretch; pointer-events: none; filter: blur(2px); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/contact-forum-mockup-web.webp"]) > img { height: auto; aspect-ratio: auto; background: transparent; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/resul-mockup-web.webp"]) { --reference-image-background: linear-gradient(135deg, rgb(246 248 252), rgb(246 248 252)); background: var(--reference-image-background); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/resul-mockup-web.webp"]) { position: relative; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/resul-mockup-web.webp"])::before { content: ''; position: absolute; inset: 0; border: var(--reference-image-padding) solid transparent; border-image: url('../../../assets/images/referenssit/resul-mockup-web.webp') 1 stretch; pointer-events: none; filter: blur(2px); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/resul-mockup-web.webp"]) > img { height: auto; aspect-ratio: auto; background: transparent; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/mustila-mockup-web.webp"]) { --reference-image-background: linear-gradient(135deg, rgb(241 239 238), rgb(244 242 240)); background: var(--reference-image-background); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/mustila-mockup-web.webp"]) { position: relative; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/mustila-mockup-web.webp"])::before { content: ''; position: absolute; inset: 0; border: var(--reference-image-padding) solid transparent; border-image: url('../../../assets/images/referenssit/mustila-mockup-web.webp') 1 stretch; pointer-events: none; filter: blur(2px); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/mustila-mockup-web.webp"]) > img { height: auto; aspect-ratio: auto; background: transparent; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/graafinen/grauline-thumb.webp"]) { --reference-image-background: linear-gradient(135deg, rgb(232 232 232), rgb(232 232 232)); background: var(--reference-image-background); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/graafinen/grauline-thumb.webp"]) { position: relative; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/graafinen/grauline-thumb.webp"])::before { content: ''; position: absolute; inset: 0; border: var(--reference-image-padding) solid transparent; border-image: url('../../../assets/images/referenssit/graafinen/grauline-thumb.webp') 1 stretch; pointer-events: none; filter: blur(2px); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/graafinen/grauline-thumb.webp"]) > img { height: auto; aspect-ratio: auto; background: transparent; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/graafinen/alfakivi-thumb.webp"]) { --reference-image-background: rgb(234 234 234); background: var(--reference-image-background); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/graafinen/finnautical-thumb.webp"]) { --reference-image-background: rgb(165 165 165); background: var(--reference-image-background); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/graafinen/ensiapukaista-thumb.webp"]) { --reference-image-background: rgb(108 108 108); background: var(--reference-image-background); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/graafinen/vivotech-thumb.webp"]) { --reference-image-background: rgb(229 229 229); background: var(--reference-image-background); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/graafinen/ilpon-sahko-thumb.webp"]) { --reference-image-background: linear-gradient(135deg, rgb(233 232 237), rgb(226 225 228)); background: var(--reference-image-background); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/graafinen/ilpon-sahko-thumb.webp"]) { position: relative; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/graafinen/ilpon-sahko-thumb.webp"])::before { content: ''; position: absolute; inset: 0; border: var(--reference-image-padding) solid transparent; border-image: url('../../../assets/images/referenssit/graafinen/ilpon-sahko-thumb.webp') 1 stretch; pointer-events: none; filter: blur(2px); }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/graafinen/ilpon-sahko-thumb.webp"]) > img { height: auto; aspect-ratio: auto; background: transparent; }
.portfolio-section :is(.proj-card-thumb, .reference-story-image, .reference-service-preview, .reference-graphic-open, .reference-interlude-media):has(img[src="assets/images/referenssit/graafinen/tililaine-thumb.webp"]) { --reference-image-background: rgb(240 240 240); background: var(--reference-image-background); }