.dges-hero-slider {
position: relative;
overflow: hidden; } .dges-hero-slides {
position: relative;
} .dges-hero-slide {
display: none;
width: 100%;
opacity: 0;
position: absolute;
top: 0;
left: 0;
} .dges-hero-slide.dges-active {
display: block;
opacity: 1;
position: relative;
animation: dges-fade-in 0.55s ease forwards;
} .dges-hero-slide.dges-leaving {
display: block;
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
pointer-events: none;
animation: dges-fade-out 0.55s ease forwards;
}
@keyframes dges-fade-in {
from { opacity: 0; }
to   { opacity: 1; }
}
@keyframes dges-fade-out {
from { opacity: 1; }
to   { opacity: 0; }
} .dges-hero-slide-inner {
display: flex;
width: 100%;
height: clamp(400px, 41vw, 760px);
} .dges-hero-text-col {
flex: 0 0 50%;
width: 50%;
box-sizing: border-box;
padding: clamp(40px, 5vw, 80px) clamp(24px, 3vw, 60px) clamp(62px, 6vw, 90px) clamp(40px, 12.2%, 210px);
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
} .dges-hero-image-col {
flex: 0 0 50%;
width: 50%;
overflow: hidden;
position: relative;
align-self: stretch;
}
.dges-hero-image-col img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
} .dges-hero-heading {
font-family: "GT Alpina Fine", "GT Alpina", Georgia, "Times New Roman", serif;
font-style: italic;
font-weight: 300;
font-size: clamp(26px, 3.2vw, 50px);
line-height: 1.12;
color: var(--dges-tc, #202020);
margin: 0 0 clamp(24px, 3vw, 44px) 0;
padding: 0;
letter-spacing: -0.01em;
max-width: 560px;
} .dges-hero-btn {
display: block;
width: 100%;
max-width: 560px;
box-sizing: border-box;
border: 1.5px solid var(--dges-tc, #202020);
color: var(--dges-tc, #202020);
background: transparent;
padding: 12px 12px;
font-family: "helvetica neue", Helvetica, Arial, Verdana, sans-serif;
font-size: 24px;
font-weight: 400;
letter-spacing: 0.01em;
line-height: 1;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
}
.dges-hero-btn-arrow {
font-style: normal;
margin-right: 6px;
}
.dges-hero-btn:hover,
.dges-hero-btn:focus-visible {
background-color: color-mix(in srgb, var(--dges-tc, #202020) 12%, transparent);
color: var(--dges-tc, #202020);
outline: none;
} .dges-hero-nav {
position: absolute;
bottom: 18px;
left: 0;
width: 50%;
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
z-index: 10;
}
.dges-hero-btn-nav {
background: none;
border: none;
cursor: pointer;
padding: 4px 6px;
color: rgba(255, 255, 255, 0.8);
font-size: 20px;
line-height: 1;
transition: color 0.2s;
}
.dges-hero-btn-nav:hover {
color: #fff;
}
.dges-hero-pause {
font-size: 12px;
letter-spacing: -1px;
} .dges-hero-dots {
display: flex;
align-items: center;
gap: 7px;
}
.dges-hero-dot {
width: 11px;
height: 11px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.45);
border: none;
cursor: pointer;
padding: 0;
margin-top: 4px;
transition: background-color 0.2s;
}
.dges-hero-dot.dges-active {
background: rgba(255, 255, 255, 0.95);
}
.dges-hero-dot:hover {
background: rgba(255, 255, 255, 0.7);
} @media (max-width: 900px) {
.dges-hero-slide-inner {
min-height: auto;
}
.dges-hero-text-col {
flex: 0 0 58%;
width: 58%;
padding: 40px 30px 50px 30px;
}
.dges-hero-image-col {
flex: 0 0 42%;
width: 42%;
}
.dges-hero-nav {
width: 58%;
}
} @media (max-width: 600px) {
.dges-hero-slide-inner {
flex-direction: column;
}
.dges-hero-text-col {
flex: none;
width: 100%;
padding: 36px 24px 40px;
}
.dges-hero-image-col {
flex: none;
width: 100%;
height: 220px;
}
.dges-hero-image-col img {
position: static;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.dges-hero-heading {
font-size: clamp(22px, 6vw, 32px);
max-width: none;
}
.dges-hero-nav {
bottom: 12px;
width: 100%;
}
}