:root { --column-count: 12; --max-width--full: calc(100vw - (var(--site-margin--main) * 2)); --site-width--inner: calc(var(--site-width--main) - (var(--site-margin--main) * 2)); --grid-width: min(var(--site-width--inner), var(--max-width--full)); --grid-gap-total: calc(var(--grid-gap--main) * (var(--column-count) - 1)); --column-width: calc((var(--grid-width) - var(--grid-gap-total)) / var(--column-count) + var(--grid-gap--main)); --max-width--small: calc(var(--column-width) * (var(--column-count) - 2) - var(--grid-gap--main)); --max-width--main: calc(var(--column-width) * var(--column-count) - var(--grid-gap--main)); --column-width--1: calc(var(--column-width) * 1 - var(--grid-gap--main)); --column-width--2: calc(var(--column-width) * 2 - var(--grid-gap--main)); --column-width--3: calc(var(--column-width) * 3 - var(--grid-gap--main)); --column-width--4: calc(var(--column-width) * 4 - var(--grid-gap--main)); --column-width--5: calc(var(--column-width) * 5 - var(--grid-gap--main)); --column-width--6: calc(var(--column-width) * 6 - var(--grid-gap--main)); --column-width--7: calc(var(--column-width) * 7 - var(--grid-gap--main)); --column-width--8: calc(var(--column-width) * 8 - var(--grid-gap--main)); --column-width--9: calc(var(--column-width) * 9 - var(--grid-gap--main)); --column-width--10: calc(var(--column-width) * 10 - var(--grid-gap--main)); --column-width--11: calc(var(--column-width) * 11 - var(--grid-gap--main)); --column-width--12: calc(var(--column-width) * 12 - var(--grid-gap--main)); --column-margin--1: calc(var(--column-width) * 1); --column-margin--2: calc(var(--column-width) * 2); --column-margin--3: calc(var(--column-width) * 3); --column-margin--4: calc(var(--column-width) * 4); --column-margin--5: calc(var(--column-width) * 5); --column-margin--6: calc(var(--column-width) * 6); --column-margin--7: calc(var(--column-width) * 7); --column-margin--8: calc(var(--column-width) * 8); --column-margin--9: calc(var(--column-width) * 9); --column-margin--10: calc(var(--column-width) * 10); --column-margin--11: calc(var(--column-width) * 11); --column-margin--12: calc(var(--column-width) * 12); --breakout-start: [full-start] minmax(0, 1fr) [content-start]; --breakout-end: [content-end] minmax(0, 1fr) [full-end]; --grid-breakout-single: var(--breakout-start) minmax(0, var(--grid-width)) var(--breakout-end); --grid-breakout: var(--breakout-start) repeat(var(--column-count), minmax(0, calc((var(--grid-width) - var(--grid-gap-total)) / var(--column-count)))) var(--breakout-end); --grid-main: repeat(var(--column-count), minmax(0, 1fr)); --grid-1: repeat(1, minmax(0, 1fr)); --grid-2: repeat(2, minmax(0, 1fr)); --grid-3: repeat(3, minmax(0, 1fr)); --grid-4: repeat(4, minmax(0, 1fr)); --grid-5: repeat(5, minmax(0, 1fr)); --grid-6: repeat(6, minmax(0, 1fr)); --grid-7: repeat(7, minmax(0, 1fr)); --grid-8: repeat(8, minmax(0, 1fr)); --grid-9: repeat(9, minmax(0, 1fr)); --grid-10: repeat(10, minmax(0, 1fr)); --grid-11: repeat(11, minmax(0, 1fr)); --grid-12: repeat(12, minmax(0, 1fr)); /* Column Span Variables */ --span-1: span 1 / span 1; --span-2: span 2 / span 2; --span-3: span 3 / span 3; --span-4: span 4 / span 4; --span-5: span 5 / span 5; --span-6: span 6 / span 6; --span-7: span 7 / span 7; --span-8: span 8 / span 8; --span-9: span 9 / span 9; --span-10: span 10 / span 10; --span-11: span 11 / span 11; --span-12: span 12 / span 12; --animation-primary: cubic-bezier(0.83, 0, 0.17, 1); --animation-secondary: cubic-bezier(0.16, 1, 0.3, 1); /* Column Start Position Variables */ --start-1: 1; --start-2: 2; --start-3: 3; --start-4: 4; --start-5: 5; --start-6: 6; --start-7: 7; --start-8: 8; --start-9: 9; --start-10: 10; --start-11: 11; --start-12: 12; --font-weight--inherit: inherit; --font-weight--100: 100; --font-weight--200: 200; --font-weight--300: 300; --font-weight--400: 400; --font-weight--500: 500; --font-weight--600: 600; --font-weight--700: 700; --font-weight--800: 800; --font-weight--900: 900; --text-transform--none: none; --text-transform--uppercase: uppercase; --text-transform--capitalize: capitalize; --text-transform--lowercase: lowercase; --text-transform--inherit: inherit; } body { font-weight: var(--text-main--font-weight); text-transform: var(--text-main--text-transform); font-smoothing: antialiased; -webkit-font-smoothing: antialiased; box-sizing: border-box; -webkit-text-rendering: optimizeSpeed; text-rendering: optimizeSpeed; } h1, h2, h3, h4, h5, h6, p, label, figure, blockquote { font-size: inherit; line-height: inherit; font-weight: inherit; margin-top: 0; margin-bottom: 0; } button { background-color: unset; padding: unset; text-align: inherit; cursor: pointer; } video { width: 100%; object-fit: cover; } video.wf-empty { padding: 0; } svg { display: block; } section, header, footer { position: relative; } @media (prefers-color-scheme: light) { option { color: black; } } img::selection { background: transparent; } a:not([class]) { text-decoration: underline; } .w-richtext a { position: relative; z-index: 4; } .u-margin-trim > :first-child, .u-margin-trim > :not(:not(.w-condition-invisible) ~ :not(.w-condition-invisible)), .u-rich-text > *:first-child, .u-rich-text .w-richtext > *:first-child { margin-top: 0; } .u-margin-trim > :last-child, .u-margin-trim > :not(:has(~ :not(.w-condition-invisible))), .u-rich-text > *:last-child, .u-rich-text .w-richtext > *:last-child { margin-bottom: 0; } .u-hide-if-empty:empty, .u-hide-if-empty:not(:has(> *:not(.w-condition-invisible))), .u-hide-if-empty-cms:not(:has(.w-dyn-item)), .u-hide-rich-text-media > *:not(h1, h2, h3, h4, h5, h6, p, blockquote), .u-embed-js, .u-embed-css { display: none !important; } .mainLogo{ height: 80px; width: auto; object-fit:contain; } .u-line-clamp-1, .u-line-clamp-2, .u-line-clamp-3, .u-line-clamp-4 { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .u-line-clamp-2 { -webkit-line-clamp: 2; } .u-line-clamp-3 { -webkit-line-clamp: 3; } .u-line-clamp-4 { -webkit-line-clamp: 4; } [tabindex]:focus-visible, a:focus-visible, button:focus-visible, .w-checkbox-input--inputType-custom.w--redirected-focus, .w-form-formradioinput--inputType-custom.w--redirected-focus { outline: 0.125rem solid #5e9ed6; } .w-checkbox-input--inputType-custom.w--redirected-focus, .w-form-formradioinput--inputType-custom.w--redirected-focus { box-shadow: none; } [data-padding-top="none"] { padding-top: var(--padding-vertical--none); } [data-padding-bottom="none"] { padding-bottom: var(--padding-vertical--none); } [data-padding-top="small"] { padding-top: var(--padding-vertical--small); } [data-padding-bottom="small"] { padding-bottom: var(--padding-vertical--small); } [data-padding-top="main"] { padding-top: var(--padding-vertical--main); } [data-padding-bottom="main"] { padding-bottom: var(--padding-vertical--main); } [data-padding-top="large"] { padding-top: var(--padding-vertical--large); } [data-padding-bottom="large"] { padding-bottom: var(--padding-vertical--large); } .wf-design-mode .g_clickable_wrap { z-index: 0; } .g_clickable_wrap a[href="#"] { display: none; } .g_clickable_wrap a[href="#"] ~ button { display: block; } /* theme light */ :root, [data-theme="light"], [data-theme="dark"] [data-theme="invert"] { --theme--background: var(--swatch--light); --theme--text: var(--swatch--dark); --theme--border: var(--swatch--light-secondary); /* button primary */ --button--background: var(--swatch--brand); --button--text: var(--swatch--brand-text); --button--border: var(--swatch--brand); --button--background-hover: var(--swatch--dark); --button--text-hover: var(--swatch--light); --button--border-hover: var(--swatch--dark); /* button secondary */ --button-secondary--background: var(--swatch--transparent); --button-secondary--text: var(--swatch--dark); --button-secondary--border: var(--swatch--light-secondary); --button-secondary--background-hover: var(--swatch--brand); --button-secondary--text-hover: var(--swatch--brand-text); --button-secondary--border-hover: var(--swatch--brand); } /* theme dark */ [data-theme="dark"], [data-theme="invert"], [data-theme="light"] [data-theme="invert"] { --theme--background: var(--swatch--dark); --theme--text: var(--swatch--light); --theme--border: var(--swatch--dark-secondary); /* button primary */ --button--background: var(--swatch--brand); --button--text: var(--swatch--brand-text); --button--border: var(--swatch--brand); --button--background-hover: var(--swatch--light); --button--text-hover: var(--swatch--dark); --button--border-hover: var(--swatch--light); /* button secondary */ --button-secondary--background: var(--swatch--transparent); --button-secondary--text: var(--swatch--light); --button-secondary--border: var(--swatch--dark-secondary); --button-secondary--background-hover: var(--swatch--brand); --button-secondary--text-hover: var(--swatch--brand-text); --button-secondary--border-hover: var(--swatch--brand); } /* button secondary */ [data-button-style="secondary"] { --button--background: var(--button-secondary--background); --button--text: var(--button-secondary--text); --button--border: var(--button-secondary--border); --button--background-hover: var(--button-secondary--background-hover); --button--text-hover: var(--button-secondary--text-hover); --button--border-hover: var(--button-secondary--border-hover); } /* apply colors */ :is(c, :where([data-theme]:not([data-theme="inherit"]))) { background-color: var(--theme--background); color: var(--theme--text); } /* https://fluidbuilder.webflow.io/?design=90&max=120&min=20&g=--site-margin--main,2,1,t_--size--2rem,2,1.75_--size--2-5rem,2.5,2_--size--3rem,3,2.25_--size--3-5rem,3.5,2.375_--size--4rem,4,2.5_--size--4-5rem,4.5,2.75_--size--5rem,5,3_--size--5-5rem,5.5,3.25_--size--6rem,6,3.5_--size--6-5rem,6.5,3.75_--size--7rem,7,4_--size--7-5rem,7.5,4.25_--size--8rem,8,4.5_--size--8-5rem,8.5,4.75_--size--9rem,9,5_--size--9-5rem,9.5,5.25_--size--10rem,10,5.5_--size--11rem,11,5.75_--size--12rem,12,6_--size--13rem,13,6.5_--size--14rem,14,7_--size--15rem,15,7.5_--size--16rem,16,8&g=:1.39,1.26:--display-large--font-size,10.56,4.79_--display--font-size,7.6,3.8,t_--h1--font-size,5.47,3.02_--h2--font-size,3.93,2.39_--h3--font-size,2.83,1.9_--h4--font-size,2.04,1.51_--h5--font-size,1.46,1.2_--h6--font-size,1.05,0.95&g=:1.2,1.14:--text-large--font-size,1.51,1.3_--variable-name,1.26,1.14_--text-main--font-size,1.05,1_--text-small--font-size,0.875,0.875,t&g=:1.49,1.4:--section-space--large,13.48,7.23_--section-space--main,9.05,5.17_--section-space--small,6.07,3.69_--space--8,4.08,2.64_--space--7,2.74,1.88_--space--6,1.84,1.34_--space--5,1.23,0.96_--space--4,0.83,0.69_--space--3,0.56,0.49_--space--2,0.37,0.35_--space--1,0.25,0.25,t */ /* fallback for older browsers */ :root { --site-margin--main: 2rem; --size--2rem: 2rem; --size--2-5rem: 2.5rem; --size--3rem: 3rem; --size--3-5rem: 3.5rem; --size--4rem: 4rem; --size--4-5rem: 4.5rem; --size--5rem: 5rem; --size--5-5rem: 5.5rem; --size--6rem: 6rem; --size--6-5rem: 6.5rem; --size--7rem: 7rem; --size--7-5rem: 7.5rem; --size--8rem: 8rem; --size--8-5rem: 8.5rem; --size--9rem: 9rem; --size--9-5rem: 9.5rem; --size--10rem: 10rem; --size--11rem: 11rem; --size--12rem: 12rem; --size--13rem: 13rem; --size--14rem: 14rem; --size--15rem: 15rem; --size--16rem: 16rem; --display-large--font-size: 10.56rem; --display--font-size: 7.6rem; --h1--font-size: 5.47rem; --h2--font-size: 3.93rem; --h3--font-size: 2.83rem; --h4--font-size: 2.04rem; --h5--font-size: 1.46rem; --h6--font-size: 1.05rem; --text-large--font-size: 1.51rem; --variable-name: 1.26rem; --text-main--font-size: 1.05rem; --text-small--font-size: 0.875rem; --section-space--large: 13.48rem; --section-space--main: 9.05rem; --section-space--small: 6.07rem; --space--8: 4.08rem; --space--7: 2.74rem; --space--6: 1.84rem; --space--5: 1.23rem; --space--4: 0.83rem; --space--3: 0.56rem; --space--2: 0.37rem; --space--1: 0.25rem; } @media screen and (max-width: 767px) { :root { --site-margin--main: 1rem; --size--2rem: 1.75rem; --size--2-5rem: 2rem; --size--3rem: 2.25rem; --size--3-5rem: 2.375rem; --size--4rem: 2.5rem; --size--4-5rem: 2.75rem; --size--5rem: 3rem; --size--5-5rem: 3.25rem; --size--6rem: 3.5rem; --size--6-5rem: 3.75rem; --size--7rem: 4rem; --size--7-5rem: 4.25rem; --size--8rem: 4.5rem; --size--8-5rem: 4.75rem; --size--9rem: 5rem; --size--9-5rem: 5.25rem; --size--10rem: 5.5rem; --size--11rem: 5.75rem; --size--12rem: 6rem; --size--13rem: 6.5rem; --size--14rem: 7rem; --size--15rem: 7.5rem; --size--16rem: 8rem; --display-large--font-size: 4.79rem; --display--font-size: 3.8rem; --h1--font-size: 3.02rem; --h2--font-size: 2.39rem; --h3--font-size: 1.9rem; --h4--font-size: 1.51rem; --h5--font-size: 1.2rem; --h6--font-size: 0.95rem; --text-large--font-size: 1.3rem; --variable-name: 1.14rem; --text-main--font-size: 1rem; --text-small--font-size: 0.875rem; --section-space--large: 7.23rem; --section-space--main: 5.17rem; --section-space--small: 3.69rem; --space--8: 2.64rem; --space--7: 1.88rem; --space--6: 1.34rem; --space--5: 0.96rem; --space--4: 0.69rem; --space--3: 0.49rem; --space--2: 0.35rem; --space--1: 0.25rem; } .mainLogo{ height: 60px; width: auto; object-fit:contain; } } /* fluid sizes */ @supports (font-size: clamp(1rem, 0.5rem + 3vw, 3rem)) { :root { --site-margin--main: clamp(0.875rem, 0.434rem + 1.23vw, 2.429rem); --size--2rem: clamp(1.75rem, 1.678rem + 0.36vw, 2.108rem); --size--2-5rem: clamp(2rem, 1.858rem + 0.71vw, 2.713rem); --size--3rem: clamp(2.25rem, 2.036rem + 1.07vw, 3.321rem); --size--3-5rem: clamp(2.375rem, 2.053rem + 1.61vw, 3.983rem); --size--4rem: clamp(2.5rem, 2.072rem + 2.14vw, 4.642rem); --size--4-5rem: clamp(2.75rem, 2.25rem + 2.5vw, 5.25rem); --size--5rem: clamp(3rem, 2.428rem + 2.86vw, 5.858rem); --size--5-5rem: clamp(3.25rem, 2.608rem + 3.21vw, 6.463rem); --size--6rem: clamp(3.5rem, 2.786rem + 3.57vw, 7.071rem); --size--6-5rem: clamp(3.75rem, 2.964rem + 3.93vw, 7.679rem); --size--7rem: clamp(4rem, 3.142rem + 4.29vw, 8.287rem); --size--7-5rem: clamp(4.25rem, 3.322rem + 4.64vw, 8.892rem); --size--8rem: clamp(4.5rem, 3.5rem + 5vw, 9.5rem); --size--8-5rem: clamp(4.75rem, 3.678rem + 5.36vw, 10.108rem); --size--9rem: clamp(5rem, 3.858rem + 5.71vw, 10.713rem); --size--9-5rem: clamp(5.25rem, 4.036rem + 6.07vw, 11.321rem); --size--10rem: clamp(5.5rem, 4.214rem + 6.43vw, 11.929rem); --size--11rem: clamp(5.75rem, 4.25rem + 7.5vw, 13.25rem); --size--12rem: clamp(6rem, 4.286rem + 8.57vw, 14.571rem); --size--13rem: clamp(6.5rem, 4.642rem + 9.29vw, 15.787rem); --size--14rem: clamp(7rem, 5rem + 10vw, 17rem); --size--15rem: clamp(7.5rem, 5.358rem + 10.71vw, 18.213rem); --size--16rem: clamp(8rem, 5.714rem + 11.43vw, 19.429rem); --display-large--font-size: clamp(4.2rem, 3.142rem + 6.24vw, 11.032rem); --display--font-size: clamp(2.5rem, 1.813rem + 5.84vw, 9.229rem); --h1--font-size: clamp(3.02rem, 2.32rem + 4.2vw, 7.52rem); --h2--font-size: clamp(2.39rem, 1.95rem + 2.2vw, 4.59rem); --h3--font-size: clamp(1.9rem, 2.6rem + 1.02vw, 3.5rem); --h4--font-size: clamp(1.51rem, 1.358rem + 0.76vw, 2.268rem); --h5--font-size: clamp(1.2rem, 1.126rem + 0.37vw, 1.571rem); --h6--font-size: clamp(0.95rem, 0.922rem + 0.14vw, 1.092rem); --text-large--font-size: clamp(1.25rem, 1.06rem + 0.26vw, 1.6rem); --variable-name: clamp(1.14rem, 1.106rem + 0.17vw, 1.311rem); --text-main--font-size: clamp(1rem, 0.986rem + 0.07vw, 1.071rem); --text-small--font-size: clamp(0.875rem, 0.8rem + 0vw, 0.875rem); --section-space--large: clamp(7.23rem, 5.444rem + 8.93vw, 16.159rem); --section-space--main: clamp(5.17rem, 4.062rem + 5.54vw, 10.712rem); --section-space--small: clamp(3.69rem, 3.01rem + 3.4vw, 7.09rem); --space--8: clamp(2.64rem, 2.228rem + 2.06vw, 4.698rem); --space--7: clamp(1.88rem, 1.634rem + 1.23vw, 3.109rem); --space--6: clamp(1.34rem, 1.198rem + 0.71vw, 2.053rem); --space--5: clamp(0.96rem, 0.882rem + 0.39vw, 1.347rem); --space--4: clamp(0.69rem, 0.65rem + 0.2vw, 0.89rem); --space--3: clamp(0.49rem, 0.47rem + 0.1vw, 0.59rem); --space--2: clamp(0.35rem, 0.344rem + 0.03vw, 0.379rem); --space--1: clamp(0.25rem, 0.25rem + 0vw, 0.25rem); } } /* Grid Layout */ [data-column-span="1"] { grid-column: var(--span-1); } [data-column-span="2"] { grid-column: var(--span-2); } [data-column-span="3"] { grid-column: var(--span-3); } [data-column-span="4"] { grid-column: var(--span-4); } [data-column-span="5"] { grid-column: var(--span-5); } [data-column-span="6"] { grid-column: var(--span-6); } [data-column-span="7"] { grid-column: var(--span-7); } [data-column-span="8"] { grid-column: var(--span-8); } [data-column-span="9"] { grid-column: var(--span-9); } [data-column-span="10"] { grid-column: var(--span-10); } [data-column-span="11"] { grid-column: var(--span-11); } [data-column-span="12"] { grid-column: var(--span-12); } [data-column-start="1"] { grid-column-start: var(--start-1); } [data-column-start="2"] { grid-column-start: var(--start-2); } [data-column-start="3"] { grid-column-start: var(--start-3); } [data-column-start="4"] { grid-column-start: var(--start-4); } [data-column-start="5"] { grid-column-start: var(--start-5); } [data-column-start="6"] { grid-column-start: var(--start-6); } [data-column-start="7"] { grid-column-start: var(--start-7); } [data-column-start="8"] { grid-column-start: var(--start-8); } [data-column-start="9"] { grid-column-start: var(--start-9); } [data-column-start="10"] { grid-column-start: var(--start-10); } [data-column-start="11"] { grid-column-start: var(--start-11); } [data-column-start="12"] { grid-column-start: var(--start-12); } [data-underline-hover]::before, [data-underline-hover]::after { content: ""; position: absolute; bottom: -0.2em; left: 0; width: 100%; height: 0.1em; background-color: var(--swatch--white); transition: transform 0.725s var(--animation-primary); transform-origin: right; transform: scaleX(0) rotate(0.001deg); } [data-underline-hover="black"]::before, [data-underline-hover="black"]::after { background-color: var(--swatch--black); bottom: 0em; } /* Alt */ [data-underline-hover]::before { transform-origin: left; transform: scaleX(1) rotate(0.001deg); transition-delay: 0.2s; } [data-underline-hover]::after { transform-origin: right; transform: scaleX(0) rotate(0.001deg); transition-delay: 0s; } .g_circle { transition: transform 0.545s var(--animation-secondary), background-color 0.3s var(--animation-secondary); } /* Works item hover */ @media (min-width: 1060px) { .works_item_wrap:hover, .works_item_wrap:focus-visible { & .works_content_cta { transform: translateY(0%); } & .works_content_year { transform: translateY(-100%); } } .works_content_cta, .works_content_year { transition: transform 0.545s var(--animation-secondary); } } @media (min-width: 768px) { [data-underline-hover]:hover::before { transform-origin: right; transform: scaleX(0) rotate(0.001deg); transition-delay: 0s; } [data-underline-hover]:hover::after { transform-origin: left; transform: scaleX(1) rotate(0.001deg); transition-delay: 0.2s; } .g_link[data-link-hover]:not([data-link-hover="black"]):hover .g_circle, .btn_default_wrap[data-link-hover]:not([data-link-hover="black"]):hover .g_circle { transform: scale(0.6); background-color: var(--swatch--white); } .g_link[data-link-hover="black"]:hover .g_circle, .btn_default_wrap[data-link-hover="black"]:hover .g_circle { transform: scale(0.6); background-color: var(--swatch--black); } [data-link] { text-shadow: 0px 1em 0px var(--swatch--white); transition: transform 0.545s var(--animation-secondary); } [data-link="black"] { text-shadow: 0px 1em 0px var(--swatch--black); } [data-link="black"] .g_circle { background-color: var(--swatch--black); } [data-link-hover]:hover [data-link] { transform: translateY(-1em); } .hero_home_list:has(.g_link:hover), .hero_home_list:has(.g_link:focus-visible) { .hero_home_facade { clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%); transform: scale(1); } .hero_home_interior { transform: scale(1); } .hero_home_overlay.is-interior { opacity: 0; } } /* Hover effects for container */ [data-hover-container]:hover, [data-hover-container]:focus-visible { & [data-hover-gradient] { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); will-change: backdrop-filter; background-color: rgba(0, 0, 0, 0.5); } & [data-hover-cover] { transform: scale(1); opacity: 1; } & [data-hover-image] { transform: scale(1.1); } } } /* Base transitions for elements */ [data-hover-image] { transition: transform 0.875s var(--animation-secondary); transform: scale(1); } [data-hover-cover] { transform: scale(0.6); opacity: 0; transform-origin: center; transition: transform 0.875s var(--animation-secondary), opacity 0.5s var(--animation-secondary); } [data-hover-gradient] { transition: all 0.2s; background-color: rgba(0, 0, 0, 0); } .hero_home_overlay.is-interior { transition: opacity 1s cubic-bezier(0.76, 0, 0.24, 1); } .hero_home_facade { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); transition: all 0.875s cubic-bezier(0.76, 0, 0.24, 1); transform: scale(1.15); will-change: transform; } .hero_home_interior { transition: transform 1s cubic-bezier(0.76, 0, 0.24, 1); transform: scale(1.15); will-change: transform; } .projects_gallery_collection { /* Your existing pattern */ & .projects_gallery_item:nth-child(3n + 1) { grid-column: var(--span-12); } & .projects_gallery_item:nth-child(3n + 2) { grid-column: var(--span-6); } & .projects_gallery_item:nth-child(3n + 3) { grid-column: var(--span-6); } /* Override based on orientation attribute - use !important to ensure priority */ & .projects_gallery_item[data-image-orientation="portrait"] { grid-column: var(--span-6); } & .projects_gallery_item[data-image-orientation="landscape"] { grid-column: var(--span-12); } } .works_collection_list { & .works_collection_item:nth-child(6n + 1) { grid-column: var(--span-6); } & .works_collection_item:nth-child(6n + 2) { grid-column: var(--span-6); grid-column-start: var(--start-7); } & .works_collection_item:nth-child(6n + 3) { grid-column: var(--span-8); } & .works_collection_item:nth-child(6n + 4) { grid-column: var(--span-3); grid-column-start: var(--start-10); } & .works_collection_item:nth-child(6n + 5) { grid-column: var(--span-4); } & .works_collection_item:nth-child(6n + 6) { grid-column: var(--span-6); grid-column-start: var(--start-7); } } @media (max-width: 767px) { .works_collection_list { & .works_collection_item:nth-child(6n + 1) { grid-column: var(--span-9); } & .works_collection_item:nth-child(6n + 2) { grid-column: var(--span-8); grid-column-start: var(--start-5); } & .works_collection_item:nth-child(6n + 3) { grid-column: var(--span-8); grid-column-start: var(--start-2); } & .works_collection_item:nth-child(6n + 4) { grid-column: var(--span-6); grid-column-start: var(--start-1); } & .works_collection_item:nth-child(6n + 5) { grid-column: var(--span-4); grid-column-start: var(--start-9); } & .works_collection_item:nth-child(6n + 6) { grid-column: var(--span-6); grid-column-start: var(--start-3); } } } @media (max-width: 480px) { .works_collection_list { & .works_collection_item:nth-child(6n + 1) { grid-column: var(--span-10); } & .works_collection_item:nth-child(6n + 2) { grid-column: var(--span-9); grid-column-start: var(--start-4); } & .works_collection_item:nth-child(6n + 3) { grid-column: var(--span-10); grid-column-start: var(--start-2); } & .works_collection_item:nth-child(6n + 4) { grid-column: var(--span-9); grid-column-start: var(--start-1); } & .works_collection_item:nth-child(6n + 5) { grid-column: var(--span-9); grid-column-start: var(--start-4); } & .works_collection_item:nth-child(6n + 6) { grid-column: var(--span-9); grid-column-start: var(--start-1); } } } .precedent_collection_list { & .precedent_collection_item:nth-child(6n + 1) { grid-column: var(--span-8); } & .precedent_collection_item:nth-child(6n + 2) { grid-column: var(--span-7); grid-column-start: var(--start-6); } & .precedent_collection_item:nth-child(6n + 3) { grid-column: var(--span-8); grid-column-start: var(--start-2); } & .precedent_collection_item:nth-child(6n + 4) { grid-column: var(--span-7); grid-column-start: var(--start-5); } & .precedent_collection_item:nth-child(6n + 5) { grid-column: var(--span-7); } & .precedent_collection_item:nth-child(6n + 6) { grid-column: var(--span-7); grid-column-start: var(--start-6); } } [data-orientation="portrait"] { aspect-ratio: 0.736 / 1; } [data-orientation="landscape"] { aspect-ratio: 16 / 11; } .navbar_mini_wrap > * { visibility: hidden; } [data-image], .testimonials_aside_image { will-change: transform; } .overflow-hidden { overflow: hidden; } .preloader_svg { animation: spin 0.6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* CMS Filter */ /* Filter Button */ .works_bottom_filterbtn::before { content: ""; background-color: var(--swatch--black); width: 6px; height: 6px; display: inline-block; margin-right: 0.4em; transition: transform 0.6s var(--animation-secondary); transform: scaleX(0); transform-origin: right; } .works_bottom_filterbtn[data-filter-status="active"]::before { transform: scaleX(1); transform-origin: left; } .works_bottom_filterbtn::before { content: ""; background-color: var(--swatch--black); width: 6px; height: 6px; display: inline-block; margin-right: 0.4em; } .works_bottom_filterbtn:hover { color: var(--swatch--black); } .works_bottom_filterbtn { transition: color 0.35s; } .works_bottom_filterbtn[data-filter-status="active"] { color: var(--swatch--black); } /* Filter List Item */ .hero_works_item[data-filter-status="active"] { transition: opacity 0.875s var(--animation-secondary), transform 0.875s var(--animation-secondary); transform: scale(1) rotate(0.001deg); opacity: 1; visibility: visible; position: relative; } .hero_works_item[data-filter-status="transition-out"] { transition: opacity 0.6s var(--animation-secondary), transform 0.6s var(--animation-secondary); transform: scale(0.9) rotate(0.001deg); opacity: 0; visibility: visible; } .hero_works_item[data-filter-status="not-active"] { transform: scale(0.9) rotate(0.001deg); opacity: 0; visibility: hidden; position: absolute; } .split-parent { overflow: hidden; margin-top: -0.04em; } .split-child { will-change: transform; padding-bottom: 0.04em; } .gallery_contain .gallery_item:nth-of-type(1) { width: 22vw; left: 110vw; top: 18vw; } .gallery_contain .gallery_item:nth-of-type(2) { width: 30vw; left: 250vw; top: 20vw; } .gallery_contain .gallery_item:nth-of-type(3) { width: 28vw; left: 245vw; top: 120vw; } .gallery_contain .gallery_item:nth-of-type(4) { width: 28vw; left: 120vw; top: 124vw; } .gallery_contain .gallery_item:nth-of-type(5) { width: 25vw; left: 15vw; top: 50vw; } .gallery_contain .gallery_item:nth-of-type(6) { width: 50vw; left: 150vw; top: 12vw; } .gallery_contain .gallery_item:nth-of-type(7) { width: 60vw; left: 32vw; top: 115vw; } .gallery_contain .gallery_item:nth-of-type(8) { width: 72vw; left: 109vw; top: 70vw; } .gallery_contain .gallery_item:nth-of-type(9) { width: 30vw; left: 60vw; /* shifted 30vw more right */ top: 70vw; } .gallery_contain .gallery_item:nth-of-type(10) { width: 29.5vw; left: 182vw; /* shifted 30vw more right */ top: 60vw; } .gallery_contain .gallery_item:nth-of-type(11) { width: 40vw; left: 170vw; /* shifted 30vw more right */ top: 125vw; } .gallery_contain .gallery_item:nth-of-type(12) { width: 20vw; left: 55vw; /* shifted 30vw more right */ top: 10vw; } .gallery_contain .gallery_item:nth-of-type(13) { width: 23vw; left: 15vw; /* shifted 30vw more right */ top: 160vw; } .gallery_contain .gallery_item:nth-of-type(14) { width: 27vw; left: 70vw; /* shifted 30vw more right */ top: 158vw; } .gallery_contain .gallery_item:nth-of-type(15) { width: 13vw; left: 230vw; /* shifted 30vw more right */ top: 90vw; } .gallery_contain .gallery_item:nth-of-type(16) { width: 23vw; left: 190vw; /* shifted 30vw more right */ top: 168vw; } @media screen and (max-width: 468px) { .gallery_contain .gallery_item:nth-of-type(1) { width: 46vw; left: 194vw; /* shifted 30vw more right */ top: 40vw; } .gallery_contain .gallery_item:nth-of-type(2) { width: 56vw; left: 490vw; /* shifted 30vw more right */ top: 82vw; } .gallery_contain .gallery_item:nth-of-type(3) { width: 45vw; left: 470vw; /* shifted 30vw more right */ top: 250vw; } .gallery_contain .gallery_item:nth-of-type(4) { width: 46vw; left: 270vw; /* shifted 30vw more right */ top: 300vw; } .gallery_contain .gallery_item:nth-of-type(5) { width: 56vw; left: 36vw; /* shifted 30vw more right */ top: 90vw; } .gallery_contain .gallery_item:nth-of-type(6) { width: 78vw; left: 278vw; /* shifted 30vw more right */ top: 60vw; } .gallery_contain .gallery_item:nth-of-type(7) { width: 90vw; left: 130vw; /* shifted 30vw more right */ top: 270vw; } .gallery_contain .gallery_item:nth-of-type(8) { width: 152vw; left: 210vw; /* shifted 30vw more right */ top: 150vw; } .gallery_contain .gallery_item:nth-of-type(9) { width: 60vw; left: 120vw; top: 170vw; } .gallery_contain .gallery_item:nth-of-type(10) { width: 59vw; left: 380vw; top: 100vw; } .gallery_contain .gallery_item:nth-of-type(11) { width: 67vw; left: 355vw; top: 270vw; } .gallery_contain .gallery_item:nth-of-type(12) { width: 40vw; left: 110vw; top: 20vw; } .gallery_contain .gallery_item:nth-of-type(13) { width: 46vw; left: 30vw; top: 320vw; } .gallery_contain .gallery_item:nth-of-type(14) { width: 54vw; left: 140vw; top: 316vw; } .gallery_contain .gallery_item:nth-of-type(15) { width: 26vw; left: 460vw; top: 180vw; } .gallery_contain .gallery_item:nth-of-type(16) { width: 46vw; left: 380vw; top: 336vw; } } .studio_members_cover.active { z-index: 10; /* Or any value ensuring it stacks on top */ }