@media (max-width: 800px) {
.hero-text-block .container {
padding-left: var(--gutter-sm) !important;
padding-right: var(--gutter-sm) !important;
}
.content-block .container {
padding-left: var(--gutter-sm) !important;
padding-right: var(--gutter-sm) !important;
}
.header-nav {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
z-index: 100 !important;
background: transparent !important;
}
.header-nav .nav-center {
position: fixed !important;
left: var(--gutter-sm) !important;
top: calc(var(--header-h) / 2) !important;
transform: translateY(-50%) !important;
z-index: 101 !important;
margin: 0 !important;
margin-top: -4px !important;
}
.header-nav .nav-right {
position: fixed !important;
right: calc(var(--gutter-sm) - 13px) !important;
top: calc(var(--header-h) / 2) !important;
transform: translateY(-50%) !important;
z-index: 102 !important;
margin: 0 !important;
padding: 0 !important;
}
.burger {
position: fixed !important;
right: calc(var(--gutter-sm) + 6px) !important;
top: calc(var(--header-h) / 2) !important;
transform: translateY(-50%) !important;
z-index: 103 !important;
display: flex !important;
margin: 0 !important;
margin-top: -6px !important;
}
.hero-left h1 {
font-size: clamp(2rem, 5vw, 2.8rem) !important;
letter-spacing: -0.01em !important;
}
.services-hero h1 {
font-size: clamp(2rem, 5vw, 2.8rem) !important;
}
.page-about .about-text p {
font-family: var(--font-display) !important;
font-size: clamp(1.1rem, 1.5vw, 1.25rem) !important;
line-height: 1.5 !important;
font-weight: 300 !important;
letter-spacing: normal !important;
}
.services-hero p {
font-size: clamp(1.1rem, 2.5vw, 1.45rem) !important;
}
.work-process .process-step p {
font-size: clamp(1.1rem, 2.5vw, 1.45rem) !important;
}
.project-info .project-title {
margin-top: -1px !important;
}
@media (max-width: 600px) {
.project-info .project-title {
margin-top: -1px !important;
}
}
}
.page-about .about-text p {
font-family: var(--font-display) !important;
font-size: clamp(1.1rem, 1.5vw, 1.25rem) !important;
line-height: 1.5 !important;
font-weight: 300 !important;
letter-spacing: normal !important;
}
@media (max-width: 800px) {
.project-layout {
align-items: stretch !important;
position: relative !important;
top: 0 !important;
transform: none !important;
}
.project-info {
position: relative !important;
top: 0 !important;
transform: none !important;
overflow: visible !important;
}
.project-gallery {
position: relative !important;
top: 0 !important;
transform: none !important;
overflow: visible !important;
-webkit-overflow-scrolling: auto !important;
}
.gallery-content {
position: relative !important;
top: 0 !important;
transform: none !important;
will-change: auto !important;
}
.gallery-item {
position: relative !important;
top: 0 !important;
transform: none !important;
will-change: auto !important;
}
.gallery-item img {
position: relative !important;
top: 0 !important;
transform: none !important;
will-change: auto !important;
display: block !important;
vertical-align: top !important;
}
.gallery-row--2 {
position: relative !important;
top: 0 !important;
transform: none !important;
will-change: auto !important;
}
}
@media (max-width: 600px) {
.project-layout {
position: relative !important;
top: 0 !important;
transform: none !important;
overflow: visible !important;
}
.project-info,
.project-gallery,
.gallery-content,
.gallery-item,
.gallery-row--2 {
position: relative !important;
top: 0 !important;
transform: none !important;
overflow: visible !important;
}
.gallery-item img {
transform: none !important;
transition: none !important;
animation: none !important;
backface-visibility: hidden !important;
-webkit-backface-visibility: hidden !important;
}
}
@media (max-width: 1200px) {
.project-layout {
align-items: stretch !important;
}
}
@supports (-webkit-touch-callout: none) {
.gallery-item img {
-webkit-transform: translateZ(0) !important;
transform: translateZ(0) !important;
-webkit-backface-visibility: hidden !important;
backface-visibility: hidden !important;
}
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.gallery-item img {
transform: translateZ(0) !important;
backface-visibility: hidden !important;
}
}