/* Portfolio Masonry — rows of 10px; spans tuned so three columns end level every 9 tiles. */
.bel-portfolio-masonry__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 10px; column-gap: 30px; }
.bel-portfolio-masonry__item { position: relative; margin: 0; padding-bottom: 30px; }
.bel-pm-s1, .bel-pm-s2, .bel-pm-s7, .bel-pm-s8 { grid-row: span 36; }
.bel-pm-s3 { grid-row: span 55; }
.bel-pm-s4 { grid-row: span 73; }
.bel-pm-s5 { grid-row: span 37; }
.bel-pm-s6 { grid-row: span 54; }
.bel-pm-s9 { grid-row: span 36; grid-column: span 2; }
.bel-portfolio-masonry__media { position: relative; height: 100%; overflow: hidden; background: var(--bel-dark); }
.bel-portfolio-masonry__media img, .bel-portfolio-masonry__media .bel-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--bel-ease); }
.bel-portfolio-masonry__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(30, 30, 30, .88), rgba(30, 30, 30, .35)); opacity: 0; transition: opacity .4s; }
.bel-portfolio-masonry__cap { position: absolute; left: 30px; right: 100px; bottom: 26px; z-index: 2; color: #fff; opacity: 0; transform: translateY(16px); transition: opacity .4s, transform .45s var(--bel-ease); }
.bel-portfolio-masonry__cat { display: block; margin-bottom: 6px; color: var(--bel-accent); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.bel-portfolio-masonry__title { display: block; font: 500 clamp(1.2rem, 1.8vw, 1.5rem)/1.3 var(--bel-font-h); }
.bel-portfolio-masonry__link { position: absolute; inset: 0; z-index: 3; display: flex; align-items: flex-end; justify-content: flex-end; padding: 24px; color: var(--bel-on-accent); }
.bel-portfolio-masonry__link .bel-icon { width: 56px; height: 56px; padding: 15px; background: var(--bel-accent); stroke-width: 2; opacity: 0; transform: scale(.6); transition: opacity .35s, transform .4s var(--bel-ease); }
.bel-portfolio-masonry__item:hover img, .bel-portfolio-masonry__item:focus-within img { transform: scale(1.06); }
.bel-portfolio-masonry__item:hover .bel-portfolio-masonry__media::after, .bel-portfolio-masonry__item:focus-within .bel-portfolio-masonry__media::after { opacity: 1; }
.bel-portfolio-masonry__item:hover .bel-portfolio-masonry__cap, .bel-portfolio-masonry__item:focus-within .bel-portfolio-masonry__cap { opacity: 1; transform: none; }
.bel-portfolio-masonry__item:hover .bel-portfolio-masonry__link .bel-icon, .bel-portfolio-masonry__item:focus-within .bel-portfolio-masonry__link .bel-icon { opacity: 1; transform: none; }
.bel-portfolio-masonry__more { margin-top: 26px; text-align: center; }
@media (hover: none) {
	.bel-portfolio-masonry__media::after, .bel-portfolio-masonry__cap { opacity: 1; transform: none; }
}
@media (max-width: 900px) {
	.bel-portfolio-masonry__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 20px; }
	.bel-portfolio-masonry__item { grid-row: auto !important; grid-column: auto !important; padding: 0; }
	.bel-portfolio-masonry__media { height: auto; aspect-ratio: 4 / 3.4; }
	.bel-portfolio-masonry__item:nth-child(3n+1) { grid-column: span 2 !important; }
	.bel-portfolio-masonry__item:nth-child(3n+1) .bel-portfolio-masonry__media { aspect-ratio: 16 / 9; }
	.bel-portfolio-masonry__more { margin-top: 44px; }
}
@media (max-width: 520px) {
	.bel-portfolio-masonry__grid { grid-template-columns: 1fr; }
	.bel-portfolio-masonry__item:nth-child(3n+1) { grid-column: auto !important; }
	.bel-portfolio-masonry__media, .bel-portfolio-masonry__item:nth-child(3n+1) .bel-portfolio-masonry__media { aspect-ratio: 4 / 3; }
}