.mgd-podhero {
--podhero-gutter: clamp(1.25rem, 5.56vw, 5rem);
position: relative;
isolation: isolate;
display: flex;
align-items: flex-end;
min-height: 78svh;
padding: clamp(8.5rem, 10.5vw, 12.5rem) var(--podhero-gutter) clamp(2.5rem, 6svh, 4rem);
overflow: hidden;
background: #1a1613;
color: #fff;
}
.mgd-podhero__tlo {
position: absolute;
inset: 0;
z-index: -2;
display: block; pointer-events: none;
-webkit-user-select: none;
user-select: none;
}
.mgd-podhero__tlo img {
width: 100%;
height: 100%;
object-fit: cover;
} .mgd-podhero::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(to top, rgba(16, 13, 11, 0.9) 0%, rgba(16, 13, 11, 0.56) 42%, rgba(16, 13, 11, 0.5) 72%, rgba(16, 13, 11, 0.62) 100%);
}
.mgd-podhero__inner {
width: 100%; max-width: 100rem;
margin-inline: auto;
}
.mgd-podhero__tytul {
margin: 0;
font-family: var(--wp--preset--font-family--heading);
font-size: clamp(2.5rem, 5.6vw, 5.5rem);
font-weight: 700;
line-height: 0.98;
letter-spacing: -0.02em;
text-transform: uppercase;
color: #fff;
}
.mgd-podhero__linia {
display: block;
} .mgd-podhero__linia--akcent {
line-height: 1.12;
text-decoration: underline #c32619;
text-decoration-thickness: 0.07em;
text-underline-offset: 0.12em;
text-decoration-skip-ink: none;
}
.mgd-podhero__dol {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem 3rem;
margin-top: clamp(1.75rem, 3.4vw, 3rem);
} .mgd-podhero__cta {
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
min-height: 3.5rem;
padding: 1.05rem 2.4rem;
border: 1px solid rgba(255, 255, 255, 0.45);
border-radius: 0.5rem;
background: rgba(16, 13, 11, 0.42);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
font-size: var(--wp--preset--font-size--sm);
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
color: #fff; will-change: transform, opacity;
backface-visibility: hidden;
transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.mgd-podhero__cta:focus-visible {
outline: 2px solid #fff;
outline-offset: 3px;
}
.mgd-podhero__opis {
max-width: 31rem;
margin: 0;
font-size: var(--wp--preset--font-size--md);
line-height: 1.7;
text-align: right;
color: rgba(255, 255, 255, 0.88);
}
@media (hover: hover) {
.mgd-podhero__cta:hover {
border-color: var(--wp--preset--color--accent-light);
background: var(--wp--preset--color--accent-light);
color: #fff;
}
}  .mgd-podhero__linia {
animation: mgd-podhero-tytul 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) both;
animation-delay: 0.2s;
}
.mgd-podhero__linia--akcent {
animation-delay: 0.38s;
}
.mgd-podhero__cta,
.mgd-podhero__opis {
animation: mgd-podhero-in 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
animation-delay: 0.75s;
}
.mgd-podhero__opis {
animation-delay: 0.9s;
}
@keyframes mgd-podhero-tytul {
from {
opacity: 0;
transform: translateY(2.2rem);
filter: blur(14px);
}
to {
opacity: 1;
transform: none;
filter: none;
}
}
@keyframes mgd-podhero-in {
from {
opacity: 0;
transform: translateY(1rem);
filter: blur(6px);
}
to {
opacity: 1;
transform: none;
filter: none;
}
} @media (max-width: 61.9375rem) { .mgd-podhero__dol {
flex-direction: column-reverse;
align-items: flex-start;
}
.mgd-podhero__opis {
text-align: left;
animation-delay: 0.75s;
}
.mgd-podhero__cta {
animation-delay: 0.9s;
}
} @media (max-width: 47.9375rem) {
.mgd-podhero {
min-height: 0;
padding-top: 9.5rem;
padding-bottom: 2.25rem;
}
.mgd-podhero__cta {
width: 100%;
white-space: normal;
text-align: center;
}
}