.fmp { --fmp-accent: #e3010f;
--fmp-ink: #5b6e74;
--fmp-ink-strong: #44555b;
--fmp-ink-soft: rgba(68, 85, 91, 0.92);
--fmp-title-idle: #5b6e74;
--fmp-title-hover: #e3010f; --fmp-card-bg: transparent; --fmp-shadow-card: 0 14px 38px rgba(20, 32, 37, 0.055), 0 2px 8px rgba(20, 32, 37, 0.035);
--fmp-shadow-card-hover: 0 28px 68px rgba(20, 32, 37, 0.11), 0 4px 14px rgba(20, 32, 37, 0.05);
--fmp-shadow-play: 0 16px 32px rgba(227, 1, 15, 0.28), 0 4px 10px rgba(0, 0, 0, 0.12);
--fmp-shadow-modal: 0 40px 100px rgba(6, 10, 12, 0.48), 0 12px 32px rgba(6, 10, 12, 0.32); --fmp-radius: 20px;
--fmp-radius-lg: 24px; --fmp-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
--fmp-dur: 1.1s; --fmp-ease-hover-in: cubic-bezier(0.25, 0.6, 0.3, 1);
--fmp-ease-hover-out: cubic-bezier(0.45, 0.05, 0.25, 1);
--fmp-hover-in: 0.9s;
--fmp-hover-out: 0.8s;
--fmp-hover-delay: 70ms;
--fmp-lift: -4px;
color: var(--fmp-ink);
font-family: inherit;
}
.fmp *,
.fmp *::before,
.fmp *::after {
box-sizing: border-box;
} .fmp,
.fmp .fmp-card,
.fmp .fmp-card__button,
.fmp .fmp-card__media {
border: 0 !important;
outline: 0;
background-color: transparent !important;
background-image: none !important;
}
.fmp .fmp-card__button {
-webkit-appearance: none;
appearance: none;
font-family: inherit;
font-size: inherit;
color: inherit;
line-height: inherit;
} .fmp__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 44px;
align-items: start;
} .fmp-card {
min-width: 0;
}
.fmp-card__button {
display: block;
width: 100%;
padding: 0;
margin: 0;
border-radius: var(--fmp-radius);
overflow: visible;
text-align: center;
cursor: pointer;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
.fmp-card__button:focus-visible {
outline: none;
}
.fmp-card__button:focus-visible .fmp-card__media {
box-shadow:
0 0 0 3px rgba(227, 1, 15, 0.16),
var(--fmp-shadow-card);
}
.fmp-card__media {
position: relative;
display: block;
overflow: hidden;
border-radius: var(--fmp-radius);
clip-path: inset(0 round var(--fmp-radius));
aspect-ratio: 1 / 1;
isolation: isolate;
box-shadow: var(--fmp-shadow-card);
}
.fmp-card__image {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
border-radius: inherit;
filter: grayscale(1) saturate(0.02) contrast(0.96) brightness(1.12);
transform: scale(1.04);
transform-origin: center 55%;
transition:
filter var(--fmp-dur) var(--fmp-ease),
transform var(--fmp-dur) var(--fmp-ease);
backface-visibility: hidden;
} .fmp-card__overlay {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 44%;
z-index: 2;
pointer-events: none;
overflow: hidden;
transition: height var(--fmp-dur) var(--fmp-ease);
}
.fmp-card__overlay-blur {
position: absolute;
inset: 0;
opacity: 1;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.04) 15%,
rgba(255, 255, 255, 0.14) 30%,
rgba(255, 255, 255, 0.32) 45%,
rgba(255, 255, 255, 0.58) 60%,
rgba(255, 255, 255, 0.82) 75%,
rgba(255, 255, 255, 0.94) 88%,
rgba(255, 255, 255, 0.97) 100%
);
transition: background var(--fmp-dur) var(--fmp-ease);
}
.fmp-card__overlay-content {
position: absolute;
left: 25px;
right: 25px;
bottom: 22px;
z-index: 3;
pointer-events: none;
text-align: center;
}
.fmp-card__title {
display: block;
width: 100%;
margin: 0;
padding: 0;
font-size: clamp(21px, calc(1.3vw + 3px), 25px);
line-height: 1.16;
letter-spacing: 0.095em;
text-transform: uppercase;
color: var(--fmp-title-idle);
font-weight: 400;
text-align: center;
white-space: normal;
overflow-wrap: break-word;
word-break: normal;
hyphens: none;
transform: translateY(0);
transition:
transform var(--fmp-dur) var(--fmp-ease),
color var(--fmp-dur) var(--fmp-ease);
}
.fmp-card__description {
display: block;
font-size: clamp(16px, 1.05vw, 18px);
line-height: 1.58;
letter-spacing: 0.005em;
color: var(--fmp-ink-strong);
text-transform: none !important;
white-space: normal;
word-break: normal;
overflow-wrap: break-word;
hyphens: auto;
text-wrap: balance;
}
.fmp-card__description--overlay {
width: 100%;
max-height: 0;
margin: 0;
padding: 0;
overflow: hidden;
text-align: center;
opacity: 0;
transform: translateY(8px);
transition:
max-height var(--fmp-dur) var(--fmp-ease),
opacity var(--fmp-dur) var(--fmp-ease),
transform var(--fmp-dur) var(--fmp-ease);
}
.fmp-card__play {
position: absolute;
left: 50%;
top: 42%;
z-index: 3;
width: 72px;
height: 72px;
transform: translate(-50%, -50%) scale(0.88);
opacity: 0;
pointer-events: none;
transition:
opacity var(--fmp-dur) var(--fmp-ease),
transform var(--fmp-dur) var(--fmp-ease);
filter: drop-shadow(var(--fmp-shadow-play));
}
.fmp-card__play svg {
display: block;
width: 100%;
height: 100%;
}
.fmp-card__play circle {
fill: var(--fmp-accent);
}
.fmp-card__play polygon {
fill: #ffffff;
}
.fmp-card__meta {
display: none;
} @media (hover: hover) and (pointer: fine) and (min-width: 768px) { .fmp-card.has-video .fmp-card__button {
position: relative;
} .fmp-card.has-video .fmp-card__button::before {
content: "";
position: absolute;
inset: 0;
border-radius: var(--fmp-radius);
box-shadow: var(--fmp-shadow-card-hover);
opacity: 0;
pointer-events: none;
transition:
opacity var(--fmp-hover-out) var(--fmp-ease-hover-out) 0.1s,
transform var(--fmp-hover-out) var(--fmp-ease-hover-out) 0.1s;
}
.fmp-card.has-video .fmp-card__media {
transition: transform var(--fmp-hover-out) var(--fmp-ease-hover-out) 0.1s;
}
.fmp-card.has-video .fmp-card__image {
will-change: transform, filter;
transition:
filter 0.9s var(--fmp-ease-hover-out) 0.12s,
transform 1.2s var(--fmp-ease-hover-out) 0.05s;
}
.fmp-card.has-video .fmp-card__media::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 64%;
z-index: 1;
pointer-events: none;
opacity: 0;
will-change: opacity;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.06) 14%,
rgba(255, 255, 255, 0.2) 28%,
rgba(255, 255, 255, 0.256) 31.25%,
rgba(255, 255, 255, 0.409) 41.56%,
rgba(255, 255, 255, 0.414) 42%,
rgba(255, 255, 255, 0.579) 51.88%,
rgba(255, 255, 255, 0.645) 56%,
rgba(255, 255, 255, 0.702) 62.19%,
rgba(255, 255, 255, 0.815) 72%,
rgba(255, 255, 255, 0.815) 72.5%,
rgba(255, 255, 255, 0.856) 82.81%,
rgba(255, 255, 255, 0.927) 86%,
rgba(255, 255, 255, 0.902) 91.75%,
rgba(255, 255, 255, 1) 100%
);
transition: opacity 0.9s var(--fmp-ease-hover-out) 0.12s;
}
.fmp-card.has-video .fmp-card__play {
transition:
opacity 0.55s var(--fmp-ease-hover-out) 0.06s,
transform var(--fmp-hover-out) var(--fmp-ease-hover-out) 0.06s;
}
.fmp-card.has-video .fmp-card__title {
transition:
transform var(--fmp-hover-out) var(--fmp-ease-hover-out) 0.04s,
color 0.6s var(--fmp-ease-hover-out) 0.04s;
} .fmp--measured .fmp-card.has-video .fmp-card__overlay-content {
transform: translateY(var(--fmp-desc-h, 0px));
transition: transform var(--fmp-hover-out) var(--fmp-ease-hover-out) 0.04s;
}
.fmp--measured .fmp-card.has-video .fmp-card__description--overlay {
max-height: none;
transition:
opacity 0.4s var(--fmp-ease-hover-out),
transform var(--fmp-hover-out) var(--fmp-ease-hover-out);
}
.fmp--measuring .fmp-card.has-video .fmp-card__overlay-content {
transition: none !important;
} .fmp-card.has-video .fmp-card__button:hover::before,
.fmp-card.has-video .fmp-card__button:focus-visible::before {
opacity: 1;
transform: translateY(var(--fmp-lift));
transition:
opacity var(--fmp-hover-in) var(--fmp-ease-hover-in) var(--fmp-hover-delay),
transform var(--fmp-hover-in) var(--fmp-ease-hover-in) var(--fmp-hover-delay);
}
.fmp-card.has-video .fmp-card__button:hover .fmp-card__media,
.fmp-card.has-video .fmp-card__button:focus-visible .fmp-card__media {
transform: translateY(var(--fmp-lift));
transition: transform var(--fmp-hover-in) var(--fmp-ease-hover-in) var(--fmp-hover-delay);
}
.fmp-card.has-video .fmp-card__button:hover .fmp-card__image,
.fmp-card.has-video .fmp-card__button:focus-visible .fmp-card__image {
filter: grayscale(0) saturate(1) contrast(1) brightness(1.02);
transform: scale(1.07);
transition:
filter 1s var(--fmp-ease-hover-in) var(--fmp-hover-delay),
transform 1.6s var(--fmp-ease-hover-in) var(--fmp-hover-delay);
}
.fmp-card.has-video .fmp-card__button:hover .fmp-card__media::after,
.fmp-card.has-video .fmp-card__button:focus-visible .fmp-card__media::after {
opacity: 1;
transition: opacity var(--fmp-hover-in) var(--fmp-ease-hover-in) var(--fmp-hover-delay);
}
.fmp-card.has-video .fmp-card__button:hover .fmp-card__play,
.fmp-card.has-video .fmp-card__button:focus-visible .fmp-card__play {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
transition:
opacity 0.7s var(--fmp-ease-hover-in) calc(var(--fmp-hover-delay) + 0.1s),
transform var(--fmp-hover-in) var(--fmp-ease-hover-in) calc(var(--fmp-hover-delay) + 0.1s);
}
.fmp-card.has-video .fmp-card__button:hover .fmp-card__title,
.fmp-card.has-video .fmp-card__button:focus-visible .fmp-card__title {
transform: translateY(-4px);
color: var(--fmp-title-hover);
transition:
transform var(--fmp-hover-in) var(--fmp-ease-hover-in) calc(var(--fmp-hover-delay) + 0.08s),
color 0.7s var(--fmp-ease-hover-in) calc(var(--fmp-hover-delay) + 0.14s);
}
.fmp--measured .fmp-card.has-video .fmp-card__button:hover .fmp-card__overlay-content,
.fmp--measured .fmp-card.has-video .fmp-card__button:focus-visible .fmp-card__overlay-content {
transform: translateY(0);
transition: transform var(--fmp-hover-in) var(--fmp-ease-hover-in) calc(var(--fmp-hover-delay) + 0.08s);
}
.fmp-card.has-video .fmp-card__button:hover .fmp-card__description--overlay,
.fmp-card.has-video .fmp-card__button:focus-visible .fmp-card__description--overlay {
max-height: 160px; opacity: 1;
transform: translateY(0);
}
.fmp--measured .fmp-card.has-video .fmp-card__button:hover .fmp-card__description--overlay,
.fmp--measured .fmp-card.has-video .fmp-card__button:focus-visible .fmp-card__description--overlay {
max-height: none;
transition:
opacity 0.7s var(--fmp-ease-hover-in) calc(var(--fmp-hover-delay) + 0.22s),
transform var(--fmp-hover-in) var(--fmp-ease-hover-in) calc(var(--fmp-hover-delay) + 0.22s);
}
}
.fmp-card.is-disabled .fmp-card__button {
cursor: default;
}
.fmp-card.is-disabled .fmp-card__image {
filter: grayscale(1) saturate(0.02) contrast(0.96) brightness(1.12);
}
.fmp-card.is-disabled .fmp-card__overlay {
height: 44%;
} .fmp-modal {
position: fixed;
inset: 0;
z-index: 10030;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.fmp-modal[hidden] {
display: none !important;
}
.fmp-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(10, 12, 14, 0.84);
backdrop-filter: blur(14px) saturate(0.9);
-webkit-backdrop-filter: blur(14px) saturate(0.9);
opacity: 0;
transition: opacity 0.42s var(--fmp-ease);
}
.fmp-modal__dialog {
position: relative;
width: min(1240px, 100%);
max-height: calc(100vh - 48px);
margin: 0;
padding: 22px 22px 26px;
border-radius: var(--fmp-radius-lg);
background:
linear-gradient(180deg, rgba(24, 28, 30, 0.985) 0%, rgba(16, 19, 21, 0.985) 100%);
border: 1px solid rgba(255, 255, 255, 0.05);
box-shadow: var(--fmp-shadow-modal);
opacity: 0;
transform: translateY(12px) scale(0.985);
transition:
opacity 0.42s var(--fmp-ease),
transform 0.52s var(--fmp-ease);
overflow: hidden; outline: none !important;
}
.fmp-modal__dialog:focus,
.fmp-modal__dialog:focus-visible {
outline: none !important;
box-shadow: var(--fmp-shadow-modal) !important;
}
.fmp-modal.is-open .fmp-modal__backdrop { opacity: 1; }
.fmp-modal.is-open .fmp-modal__dialog { opacity: 1; transform: translateY(0) scale(1); } .fmp-modal__close {
position: absolute;
top: 16px;
right: 16px;
z-index: 8;
width: 44px;
height: 44px;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 999px !important;
padding: 0;
display: grid;
place-items: center;
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.88);
cursor: pointer;
transition:
background 0.3s var(--fmp-ease),
border-color 0.3s var(--fmp-ease),
color 0.3s var(--fmp-ease),
transform 0.3s var(--fmp-ease);
-webkit-appearance: none;
appearance: none;
}
.fmp-modal__close:hover,
.fmp-modal__close:focus-visible {
background: rgba(227, 1, 15, 0.92);
border-color: rgba(227, 1, 15, 1);
color: #ffffff;
transform: translateY(-1px);
outline: none;
}
.fmp-modal__close svg { width: 18px; height: 18px; display: block; }
.fmp-modal__close path { stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .fmp-modal__media {
position: relative;
background: #080b0c;
border-radius: 18px;
overflow: hidden;
aspect-ratio: 16 / 9;
}
.fmp-modal__video {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
background: #050607;
} .fmp-modal__center-toggle {
position: absolute;
left: 50%;
top: 50%;
z-index: 5;
width: 92px;
height: 92px;
padding: 0;
margin: 0;
border: 0 !important;
border-radius: 999px;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
transform: translate(-50%, -50%);
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity 0.32s var(--fmp-ease), transform 0.32s var(--fmp-ease);
-webkit-appearance: none;
appearance: none;
-webkit-tap-highlight-color: transparent;
box-shadow: none;
outline: none;
}
.fmp-modal__center-toggle:focus,
.fmp-modal__center-toggle:focus-visible {
outline: none;
background: transparent !important;
}
.fmp-modal__center-toggle svg {
width: 100%;
height: 100%;
display: block;
filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.38));
transition: transform 0.32s var(--fmp-ease);
}
.fmp-modal__center-toggle:hover svg {
transform: scale(1.04);
}
.fmp-modal__center-toggle circle { fill: #e3010f; }
.fmp-modal__center-toggle polygon,
.fmp-modal__center-toggle rect { fill: #ffffff; }
.fmp-modal.is-paused .fmp-modal__center-toggle { opacity: 1; pointer-events: auto; } .fmp-modal__controls {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 4;
padding: 22px 18px 16px;
background: linear-gradient(
180deg,
rgba(7, 10, 11, 0) 0%,
rgba(7, 10, 11, 0.22) 22%,
rgba(7, 10, 11, 0.82) 100%
);
opacity: 1;
transform: translateY(0);
transition:
opacity 0.32s var(--fmp-ease),
transform 0.32s var(--fmp-ease);
}
.fmp-modal.is-ui-hidden .fmp-modal__controls {
opacity: 0;
transform: translateY(10px);
pointer-events: none;
}
.fmp-modal__controls-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.fmp-modal__controls-group {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
} .fmp-control {
width: 40px;
height: 40px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.07) !important;
border-radius: 999px !important;
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.92);
display: grid;
place-items: center;
cursor: pointer;
transition:
background 0.3s var(--fmp-ease),
border-color 0.3s var(--fmp-ease),
color 0.3s var(--fmp-ease),
transform 0.3s var(--fmp-ease);
-webkit-appearance: none;
appearance: none;
}
.fmp-control:hover,
.fmp-control:focus-visible {
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.16);
color: #ffffff;
transform: translateY(-1px);
outline: none;
}
.fmp-control svg { width: 18px; height: 18px; display: block; }
.fmp-control svg * {
fill: currentColor;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.fmp-modal .is-pause,
.fmp-modal .is-muted { display: none; }
.fmp-modal.is-playing [data-fmp-toggle-play] .is-play { display: none; }
.fmp-modal.is-playing [data-fmp-toggle-play] .is-pause { display: block; }
.fmp-modal.is-muted [data-fmp-toggle-mute] .is-unmuted { display: none; }
.fmp-modal.is-muted [data-fmp-toggle-mute] .is-muted { display: block; } .fmp-modal__time {
display: inline-flex;
align-items: center;
gap: 6px;
color: rgba(255, 255, 255, 0.82);
font-size: 13px;
letter-spacing: 0.06em;
white-space: nowrap;
font-variant-numeric: tabular-nums;
padding-left: 4px;
}
.fmp-modal__time-sep { opacity: 0.4; } .fmp-modal__progress-wrap { margin-top: 14px; }
.fmp-modal__progress {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 4px;
border-radius: 999px;
background: linear-gradient(90deg, #E3010F 0%, #E3010F 0%, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0.24) 100%);
outline: none;
cursor: pointer;
}
.fmp-modal__progress::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 14px; height: 14px;
border-radius: 50%;
background: #ffffff;
border: 0;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
transition: transform 0.2s var(--fmp-ease);
}
.fmp-modal__progress:hover::-webkit-slider-thumb {
transform: scale(1.12);
}
.fmp-modal__progress::-moz-range-thumb {
width: 14px; height: 14px;
border-radius: 50%;
background: #ffffff;
border: 0;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.fmp-modal__progress::-moz-range-track {
height: 4px;
border-radius: 999px;
background: transparent;
} .fmp-modal__copy {
padding: 26px 12px 4px;
color: #ffffff;
text-align: center;
}
.fmp-modal__title {
margin: 0 auto 12px;
color: #ffffff;
font-size: clamp(22px, 2.1vw, 28px);
line-height: 1.2;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 400;
max-width: 880px;
}
.fmp-modal__description {
margin: 0 auto;
max-width: 720px;
color: rgba(255, 255, 255, 0.78);
font-size: 16px;
line-height: 1.72;
letter-spacing: 0.01em;
text-wrap: balance;
}
body.fmp-modal-open {
overflow: hidden;
touch-action: none;
} @media (max-width: 1180px) {
.fmp__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 34px;
}
} @media (hover: hover) and (pointer: fine) and (min-width: 768px) and (max-width: 1180px) {
.fmp-card.has-video .fmp-card__media::after {
height: 58%;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.06) 14%,
rgba(255, 255, 255, 0.161) 24.14%,
rgba(255, 255, 255, 0.189) 28%,
rgba(255, 255, 255, 0.301) 35.52%,
rgba(255, 255, 255, 0.38) 42%,
rgba(255, 255, 255, 0.463) 46.9%,
rgba(255, 255, 255, 0.609) 56%,
rgba(255, 255, 255, 0.63) 58.28%,
rgba(255, 255, 255, 0.74) 69.66%,
rgba(255, 255, 255, 0.784) 72%,
rgba(255, 255, 255, 0.806) 81.03%,
rgba(255, 255, 255, 0.916) 86%,
rgba(255, 255, 255, 0.892) 90.9%,
rgba(255, 255, 255, 1) 100%
);
}
}
@media (max-width: 767px) {
.fmp {
padding-left: 15px;
padding-right: 15px;
}
.fmp__grid {
grid-template-columns: 1fr;
gap: 56px;
}
.fmp-card__media {
aspect-ratio: 16 / 10;
}
.fmp-card__image {
filter: grayscale(0) saturate(1) contrast(1) brightness(1.02);
transform: scale(1.02);
}
.fmp-card__overlay {
height: 40%;
}
.fmp-card__overlay-content {
left: 18px;
right: 18px;
bottom: 16px;
}
.fmp-card__title {
font-size: 23px;
letter-spacing: 0.085em;
}
.fmp-card__description--overlay {
display: none;
}
.fmp-card__play {
width: 60px;
height: 60px;
top: 50%;
opacity: 1;
transform: translate(-50%, -50%) scale(1);
animation: none;
}
.fmp-card__meta {
display: block;
margin-top: 12px;
padding: 0 4px;
}
.fmp-card__description--mobile {
display: block;
width: calc(100% - 16px);
margin: 0 auto;
padding: 0 4px;
font-size: 16px;
line-height: 1.65;
color: var(--fmp-ink-soft);
text-align: center;
} .fmp-modal {
padding: 10px;
}
.fmp-modal__dialog {
width: 100%;
max-height: calc(100vh - 20px);
padding: 14px 14px 18px;
border-radius: 18px;
}
.fmp-modal__media { border-radius: 12px; }
.fmp-modal__close { top: 12px; right: 12px; width: 40px; height: 40px; }
.fmp-modal__controls { padding: 14px 12px 12px; }
.fmp-modal__controls-row { gap: 10px; }
.fmp-modal__controls-group { gap: 8px; }
.fmp-modal__time { font-size: 12px; }
.fmp-control { width: 36px; height: 36px; }
.fmp-modal__center-toggle { width: 76px; height: 76px; }
.fmp-modal__copy { padding: 20px 6px 2px; }
.fmp-modal__title { font-size: 19px; letter-spacing: 0.11em; margin-bottom: 10px; }
.fmp-modal__description { font-size: 15px; line-height: 1.68; }
} @media (hover: none), (pointer: coarse) {
.fmp-card__image {
filter: grayscale(0) saturate(1) contrast(1) brightness(1.02);
transform: scale(1.02);
}
.fmp-card__overlay { height: 40%; }
.fmp-card__description--overlay { display: none; }
.fmp-card__play {
opacity: 1;
top: 50%;
transform: translate(-50%, -50%) scale(1);
animation: none;
}
} @media (max-width: 767px), (hover: none), (pointer: coarse) {
.fmp-card__overlay {
height: 60%;
}
.fmp-card__overlay-blur {
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.06) 18%,
rgba(255, 255, 255, 0.22) 34%,
rgba(255, 255, 255, 0.5) 48%,
rgba(255, 255, 255, 0.74) 60%,
rgba(255, 255, 255, 0.88) 70%,
rgba(255, 255, 255, 0.95) 84%,
rgba(255, 255, 255, 0.97) 100%
);
}
.fmp-card__title {
color: var(--fmp-ink-strong);
text-shadow: 0 1px 14px rgba(255, 255, 255, 0.7);
}
} @media (min-width: 768px) and (hover: none), (min-width: 768px) and (pointer: coarse) {
.fmp-card__overlay {
height: 50%;
}
} @media (prefers-reduced-motion: reduce) {
.fmp-card__button::before,
.fmp-card__image,
.fmp-card__media,
.fmp-card__media::after,
.fmp-card__overlay-content,
.fmp-card__overlay,
.fmp-card__overlay-blur,
.fmp-card__title,
.fmp-card__description--overlay,
.fmp-card__play,
.fmp-modal__backdrop,
.fmp-modal__dialog,
.fmp-modal__controls,
.fmp-modal__center-toggle,
.fmp-modal__center-toggle svg,
.fmp-control,
.fmp-modal__close,
.fmp-modal__progress::-webkit-slider-thumb {
transition: none !important;
animation: none !important;
}
}