.promo-grid {
    display: grid;
    grid-template-columns: 1.3fr 2fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    aspect-ratio:  1.925 / 1;
    margin-bottom: 1.2rem;
    gap: 1.1rem;
}

.promo-grid__left {
    grid-row: 1 / 3;      /* занять обе строки */
    grid-column: 1 / 2;
}

.promo-grid__top-right {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
}

.promo-grid__bottom-right {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    display: grid;
    grid-template-columns: 1fr 2fr;   /* большой серый + узкий правый */
    gap: 1.2rem;
    align-items: stretch;

}
.promo-grid__bottom-main{
    height: 100%;
    background: url("/assets/components/templates/img/promo_32.jpg");
    background-size: cover;
}
.promo-grid_bottom-main img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* или contain */
}
.promo-grid img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;   /* чтобы картинки аккуратно заполняли блоки */
    border-radius: 0px;  /* по желанию */
}


@media (max-width: 768px) {
    .promo-grid {
        grid-template-columns: 1.3fr 2fr;
        grid-template-rows: repeat(2, minmax(0, 1fr));;
        aspect-ratio:  1.88 / 1;
        height: 100%;
        gap: 0.25rem;
        margin-bottom: 0rem;
        padding: 0.25rem !important;

    }
    .promo-grid__bottom-right{
        gap: 0.25rem;

    }
    .ny26__title {
        margin: 0;
        line-height: 1.05;
        font-weight: 800;
        color: #cf3131;
        font-size: clamp(22px, 3.2vw, 42px);

    }
/*
    .promo-grid__left,
    .promo-grid__top-right,
    .promo-grid__bottom-right {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .promo-grid__bottom-right {
        grid-template-columns: 1fr;
    }*/
}



/* flip: вращаем только фон (background-layer), не картинку/контент */
.flip-card {
    width: 100%;
    height: 100%;
    perspective: 1000px; /* как у вас было */
}

.flip-card-media {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s ease;
}

/* два фона как две "стороны" */
.flip-card-media::before,
.flip-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    backface-visibility: hidden;
}

/* лицевая сторона */
.flip-card-media::before {
    background-image: var(--bg-front);
}

/* оборотная сторона */
.flip-card-media::after {
    background-image: var(--bg-back);
    transform: rotateY(180deg);
}

/* ДЕСКТОП: hover вращает только фон */
@media (hover: hover) and (pointer: fine) {
    .flip-card:hover .flip-card-media {
        transform: rotateY(180deg);
    }

    /* на hover кликаем по back-ссылке */
    .flip-card-link--back { opacity: 0; pointer-events: none; }
    .flip-card:hover .flip-card-link--back { opacity: 1; pointer-events: auto; }
    .flip-card:hover .flip-card-link--front { opacity: 0; pointer-events: none; }
}

/* ТАЧ: flip по тапу (фокус внутри) */
@media (hover: none) and (pointer: coarse) {
    .flip-card:focus-within .flip-card-media {
        transform: rotateY(180deg);
    }

    /* по умолчанию кликаем front */
    .flip-card-link--back { opacity: 0; pointer-events: none; }
    .flip-card:focus-within .flip-card-link--back { opacity: 1; pointer-events: auto; }
    .flip-card:focus-within .flip-card-link--front { opacity: 0; pointer-events: none; }
}

/* ссылки поверх фона */
.flip-card-link {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
}

/* подпись не вращается */
.flip-card-caption {
    margin-top: 10px;
}


/***********************/




/* TODO: замените селектор на реальный селектор вашего бежевого блока */
.promo-grid__top-right
{
    position: relative;
    overflow: hidden;
    background-color: #ffd3d3 !important;
}

/* Базовый контейнер поздравления */
.ny26 {
    position: relative;
    height: 100%;
    min-height: 220px;
    display: grid;
    place-items: center;
    padding: clamp(16px, 3vw, 28px);
}

/* Фон: легкая "свеча/блик" поверх бежевого */
.ny26__bg {
    position: absolute;
    inset: 0;
    background:
            radial-gradient(700px 300px at 20% 20%, rgba(255,255,255,.55), transparent 60%),
            radial-gradient(600px 280px at 80% 30%, rgba(248, 219, 219, 0.35), transparent 65%),
            radial-gradient(800px 500px at 50% 120%, rgba(255,255,255,.25), transparent 60%);
    animation: ny26Glow 6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes ny26Glow {
    0%, 100% { transform: translateY(0); filter: blur(0px); opacity: 1; }
    50%      { transform: translateY(-6px); filter: blur(0.3px); opacity: .92; }
}

.ny26__content {
    position: relative;
    text-align: center;
    max-width: 560px;
    z-index: 2;
}

.ny26__kicker {
    font-size: clamp(12px, 1.2vw, 14px);
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .75;
    margin-bottom: 8px;
}

.ny26__title {
    margin: 0;
    line-height: 1.05;
    font-weight: 800;
    color: #cf3131;
    font-size: clamp(22px, 3.2vw, 42px);

}

.ny26__title span {
    display: inline-block;
    transform-origin: center;
    animation: ny26Pop 1.8s ease-in-out infinite;
}

.ny26__title span:nth-child(1) { animation-delay: 0s; }
.ny26__title .ny26__year       { animation-delay: .12s; }
.ny26__title span:nth-child(3) { animation-delay: .24s; }

@keyframes ny26Pop {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-3px) scale(1.02); }
}

/* Подсветка "2026" */
.ny26__year {
    position: relative;
    padding: .1rem .3em;
    background: linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.65), rgba(255,255,255,.0));
    border-radius: 999px;
    animation: ny26Shine 2.6s linear infinite;
    color: #1c1010;
}

@keyframes ny26Shine {
    0%   { filter: brightness(1); }
    50%  { filter: brightness(1.15); }
    100% { filter: brightness(1); }
}

.ny26__subtitle {
    margin-top: 10px;
    font-size: clamp(13px, 1.5vw, 16px);
    opacity: .85;
}

/* CTA */
.ny26__cta {
    display: inline-block;
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    border: 1px solid rgba(0,0,0,.12);
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(6px);
    transition: transform .15s ease, background .15s ease;
    color: black;
}

.ny26__cta:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,.7);
}

/* Снег (чистый CSS) */
.ny26__snow {
    position: absolute;
    inset: -20px 0 0 0;
    z-index: 1;
    pointer-events: none;
}

.ny26__snow i {
    position: absolute;
    top: -24px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.85);
    box-shadow: 0 0 8px rgba(255,255,255,.35);
    animation: ny26SnowFall linear infinite;
    opacity: .9;
}

/* Разброс снежинок: позиции/скорость/размер */
.ny26__snow i:nth-child(1)  { left: 5%;  animation-duration: 8s;  transform: scale(.7); }
.ny26__snow i:nth-child(2)  { left: 12%; animation-duration: 10s; transform: scale(.9); opacity: .7; }
.ny26__snow i:nth-child(3)  { left: 18%; animation-duration: 7s;  transform: scale(.6); }
.ny26__snow i:nth-child(4)  { left: 26%; animation-duration: 11s; transform: scale(1.1); }
.ny26__snow i:nth-child(5)  { left: 33%; animation-duration: 9s;  transform: scale(.8); opacity: .75; }
.ny26__snow i:nth-child(6)  { left: 40%; animation-duration: 12s; transform: scale(.65); }
.ny26__snow i:nth-child(7)  { left: 48%; animation-duration: 8.5s;transform: scale(.95); }
.ny26__snow i:nth-child(8)  { left: 55%; animation-duration: 10.5s;transform: scale(.75); opacity: .7; }
.ny26__snow i:nth-child(9)  { left: 62%; animation-duration: 7.8s;transform: scale(1.05); }
.ny26__snow i:nth-child(10) { left: 70%; animation-duration: 9.8s;transform: scale(.6); }
.ny26__snow i:nth-child(11) { left: 76%; animation-duration: 11.5s;transform: scale(.9); opacity: .75; }
.ny26__snow i:nth-child(12) { left: 82%; animation-duration: 8.8s;transform: scale(.7); }
.ny26__snow i:nth-child(13) { left: 88%; animation-duration: 12.8s;transform: scale(1.1); opacity: .65; }
.ny26__snow i:nth-child(14) { left: 93%; animation-duration: 9.2s;transform: scale(.8); }
.ny26__snow i:nth-child(15) { left: 22%; animation-duration: 13s; transform: scale(.55); opacity: .6; }
.ny26__snow i:nth-child(16) { left: 58%; animation-duration: 14s; transform: scale(.6); opacity: .6; }
.ny26__snow i:nth-child(17) { left: 44%; animation-duration: 15s; transform: scale(.55); opacity: .55; }
.ny26__snow i:nth-child(18) { left: 9%;  animation-duration: 16s; transform: scale(.5); opacity: .5; }
.ny26__snow i:nth-child(19) { left: 67%; animation-duration: 17s; transform: scale(.5); opacity: .5; }
.ny26__snow i:nth-child(20) { left: 35%; animation-duration: 18s; transform: scale(.45); opacity: .45; }

@keyframes ny26SnowFall {
    0%   { transform: translate3d(0, 0, 0)      rotate(0deg) scale(1); }
    100% { transform: translate3d(30px, 320px, 0) rotate(360deg) scale(1); }
}

/* Уважение к prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .ny26__bg,
    .ny26__title span,
    .ny26__snow i {
        animation: none !important;
    }
}
a.incatalog{
    color: #4c0b0b;
    margin-top: 24px;
    padding: 10px 14px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    border: 1px solid rgba(0,0,0,.12);
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(6px);
    transition: transform .15s ease, background .15s ease;
    display: inline-flex;
}

/* Контейнер оверлея */
.promo-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;               /* отступ от низа картинки */
    z-index: 5;
    pointer-events: none;       /* клики проходят сквозь, если нужно */
}

/* Внутренний блок */
.promo-overlay__inner {
    pointer-events: auto;       /* кликабельный контент */
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    padding: 12px 20px;
    border-radius: 12px;
    max-width: 90%;
}