.odo-project-blocks {
--odo-pb-height: 70vh;
--odo-pb-pad: clamp(1.5rem, 4vw, 2.5rem);
--odo-pb-bg: var(--apy-surface, #ffffff);
--odo-pb-surface: var(--apy-surface, #ffffff);
--odo-pb-text: var(--apy-text, #1d1d1b);
--odo-pb-muted: var(--apy-muted, #6b6b67);
--odo-pb-border: var(--apy-border, #dfddd7);
--odo-pb-primary: var(--apy-primary, #8f7452);
}
.odo-pb-empty {
margin: 2rem;
padding: 1rem;
color: var(--odo-pb-muted);
} .odo-project-blocks .odo-pb-section {
position: relative;
min-height: var(--odo-pb-height);
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
overflow: hidden;
background: var(--odo-pb-surface);
} .odo-project-blocks .odo-pb--img-right {
grid-template-areas: "content media";
}
.odo-project-blocks .odo-pb--img-right .odo-pb__media {
grid-area: media;
}
.odo-project-blocks .odo-pb--img-right .odo-pb__content-wrap {
grid-area: content;
justify-content: flex-end;
text-align: right;
} .odo-project-blocks .odo-pb--img-left {
grid-template-areas: "media content";
}
.odo-project-blocks .odo-pb--img-left .odo-pb__media {
grid-area: media;
}
.odo-project-blocks .odo-pb--img-left .odo-pb__content-wrap {
grid-area: content;
justify-content: flex-start;
text-align: left;
} .odo-project-blocks .odo-pb__media {
position: relative;
overflow: hidden;
z-index: 0;
align-self: stretch;
min-height: 100%;
} .odo-project-blocks .odo-pb__media .odo-pb__media-link,
.odo-project-blocks .odo-pb__media a {
display: block;
height: 100%;
text-decoration: none;
color: inherit;
position: relative;
} .odo-project-blocks .odo-pb__media-overlay {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(0.75rem, 3vw, 1.5rem);
text-align: center;
pointer-events: none;
background-color: var(--odo-pb-mo-bg, transparent);
transition: background-color 0.28s ease;
}
.odo-project-blocks .odo-pb__media-link:hover .odo-pb__media-overlay,
.odo-project-blocks .odo-pb__media:hover .odo-pb__media-overlay {
background-color: var(--odo-pb-mo-hover, var(--odo-pb-mo-bg, transparent));
}
.odo-project-blocks .odo-pb__media-overlay--has-text .odo-pb__media-overlay-text {
color: #ffffff;
font-size: clamp(0.95rem, 1.8vw, 1.2rem);
font-weight: 600;
line-height: 1.35;
text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
max-width: 90%;
} .odo-project-blocks .odo-pb__img-holder {
position: absolute;
left: -15%;
top: -50%;
width: 130%;
height: 200%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
will-change: transform;
}
.odo-project-blocks .odo-pb__img-holder img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.odo-project-blocks .odo-pb__img-placeholder {
inset: 0;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: var(--odo-pb-border);
display: flex;
align-items: center;
justify-content: center;
color: var(--odo-pb-muted);
font-size: 0.9rem;
} .odo-project-blocks .odo-pb__content-wrap {
position: relative;
z-index: 1;
display: flex;
align-items: center;
padding: var(--odo-pb-pad);
background: var(--odo-pb-bg);
box-shadow: -8px 0 24px rgba(0, 0, 0, 0.06), 8px 0 24px rgba(0, 0, 0, 0.04);
}
.odo-project-blocks .odo-pb--img-left .odo-pb__content-wrap {
box-shadow: 8px 0 24px rgba(0, 0, 0, 0.06), -8px 0 24px rgba(0, 0, 0, 0.04);
} .odo-project-blocks .odo-pb__year-bg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: clamp(5rem, 14vw, 11rem);
font-weight: 800;
line-height: 1;
color: black;
opacity: 0.07;
pointer-events: none;
user-select: none;
white-space: nowrap;
z-index: 0;
letter-spacing: -0.02em;
}
.odo-project-blocks .odo-pb__content {
position: relative;
z-index: 1;
width: 100%;
}
.odo-pb--img-right .odo-pb__content {
margin-right: 0;
text-align: center;
margin: auto;
}
.odo-pb--img-left .odo-pb__content {
margin-left: 0;
text-align: center;
margin: auto;
} .odo-project-blocks .odo-pb__year {
margin: 0 0 0.5rem;
font-size: 0.9rem;
font-weight: 600;
color: var(--odo-pb-primary);
letter-spacing: 0.05em;
}
.odo-project-blocks .odo-pb__title {
margin: 0 0 0.35rem;
font-size: clamp(1.35rem, 2.5vw, 1.75rem);
font-weight: 600;
line-height: 1.2;
color: var(--odo-pb-text);
}
.odo-project-blocks .odo-pb__subtitle {
margin: 0 0 0.5rem;
font-size: 1rem;
font-weight: 500;
color: var(--odo-pb-muted);
}
.odo-project-blocks .odo-pb__stats {
margin: 0 0 1rem;
font-size: clamp(1rem, 1.5vw, 1.15rem);
font-weight: 600;
color: var(--odo-pb-text);
line-height: 1.35;
}
.odo-project-blocks .odo-pb__services-label {
margin: 0 0 0.35rem;
font-size: 0.95rem;
font-weight: 600;
color: var(--odo-pb-text);
}
.odo-project-blocks .odo-pb__services {
margin: 0 0 1rem;
font-size: 0.95rem;
line-height: 1.55;
color: var(--odo-pb-muted);
} .odo-project-blocks .odo-pb__content a.odo-pb__btn {
display: inline-block;
box-sizing: border-box;
font-size: 0.88rem;
font-weight: 600;
letter-spacing: 0.04em;
line-height: 1.35;
text-align: center;
color: var(--odo-pb-btn-color, var(--odo-pb-primary)) !important;
background-color: var(--odo-pb-btn-bg, transparent) !important;
background-image: none !important;
border: 0;
border-radius: var(--odo-pb-btn-radius, 0);
padding: var(--odo-pb-btn-padding, 0);
text-decoration: none !important;
cursor: pointer;
transition: color 0.2s ease, background-color 0.2s ease;
box-shadow: none;
} .odo-project-blocks .odo-pb__content a.odo-pb__btn:not([class*='odo-pb__btn-cfg-']):hover,
.odo-project-blocks .odo-pb__content a.odo-pb__btn:not([class*='odo-pb__btn-cfg-']):focus-visible {
color: var(--odo-pb-btn-hover-color, var(--odo-pb-text)) !important;
background-color: var(--odo-pb-btn-hover-bg, var(--odo-pb-btn-bg, transparent)) !important;
background-image: none !important;
}
@media (prefers-reduced-motion: reduce) {
.odo-project-blocks .odo-pb__img-holder {
will-change: auto;
inset: 0;
width: 100%;
height: 100%;
}
} @media (max-width: 900px) {
.odo-project-blocks .odo-pb-section {
grid-template-columns: 1fr;
grid-template-areas: "media" "content";
min-height: auto;
}
.odo-project-blocks .odo-pb--img-right,
.odo-project-blocks .odo-pb--img-left {
grid-template-areas: "media" "content";
}
.odo-project-blocks .odo-pb__media {
min-height: 56vh;
grid-area: media;
}
.odo-project-blocks .odo-pb__img-holder {
left: 0;
top: 0;
width: 100%;
height: 100%;
transform: translate3d(0, 0, 0) !important;
}
.odo-project-blocks .odo-pb__content-wrap {
grid-area: content;
justify-content: center;
text-align: center;
padding: 2rem 1.5rem;
}
.odo-project-blocks .odo-pb__content {
margin-left: auto;
margin-right: auto;
} .odo-project-blocks .odo-pb__year-bg {
font-size: clamp(4rem, 25vw, 7rem);
}
}