.bg-grid{--cols:4;--gap:24px;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap)} .bg-grid > *{flex:0 1 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));min-width:0} @media (max-width:1100px){.bg-grid > *{flex-basis:calc((100% - 2 * var(--gap)) / 3)}} @media (max-width:760px){.bg-grid > *{flex-basis:calc((100% - var(--gap)) / 2)}} @media (max-width:460px){.bg-grid > *{flex-basis:100%}} /* even — ровные ряды: карточки одной высоты, неполный последний ряд центрируется базовым justify-content. Правило существует и потому, что класс без единого правила в CSS означает потерянный при порте стиль, и общий свод справедливо на это краснеет. */ .bg-grid.even{align-items:stretch} .bg-grid.even > *{flex-grow:0} .bg-grid.rail{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scroll-snap-type:x mandatory} .bg-grid.rail > *{scroll-snap-align:start;flex:0 0 260px} [hidden]{display:none!important} .bg-tscroll{overflow-x:auto;max-width:100%;min-width:0} table.bg-t{width:100%;border-collapse:collapse;min-width:560px} table.bg-t td.num{text-align:right;font-variant-numeric:tabular-nums} @media (max-width:640px){ table.bg-t{min-width:0} table.bg-t thead{position:absolute;left:-9999px} table.bg-t tr{display:block;margin-bottom:12px} table.bg-t td{display:flex;justify-content:space-between;gap:12px} table.bg-t td::before{content:attr(data-label);font-weight:600} } .bg-crumbs ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0} .bg-pager{display:flex;gap:8px;flex-wrap:wrap} .bg-filters{display:flex;gap:8px;flex-wrap:wrap} .bg-chip[aria-pressed="true"]{font-weight:600} .bg-field{display:flex;flex-direction:column;gap:6px} .bg-zoom{border:0;padding:0;max-width:96vw;max-height:96vh} .bg-zoom img{display:block;max-width:96vw;max-height:96vh;height:auto} .bg-gal{display:flex;flex-wrap:wrap;gap:16px;justify-content:center} .bg-gal > *{flex:0 1 calc((100% - 32px) / 3);min-width:0} @media (max-width:700px){.bg-gal > *{flex-basis:100%}} .bg-shot-link{position:relative;display:block} .bg-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;min-width:0} .bg-card{display:flex;flex-direction:column;min-width:0} @font-face{font-family:"Urbanist";src:url(/assets/fonts/urbanist-latin.7981ef90.woff2) format("woff2");font-weight:300 800;font-style:normal;font-display:swap} @font-face{font-family:"Faustina";src:url(/assets/fonts/faustina-latin.df206bf2.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap} :root{ --ink:#231D33; --inkSoft:#5A5270; --inkFaint:#6E6880; --paper:#FFFFFF; --paper2:#FBF9F6; --lilac:#D8D6F3; --lilacTint:#EFEEFB; --lilacPale:#F7F6FD; --deep:#2C2350; --deep2:#3E3270; --violet:#4A3B93; --blush:#FAEFEC; --blushInk:#8A4A54; --sand:#FAF3E7; --sandInk:#7A5B2E; --line:#E4E0F0; --lineSoft:#EFECF7; --good:#4F6B45; --dsp:"Urbanist",-apple-system,"Segoe UI",Roboto,sans-serif; --txt:"Faustina",Georgia,"Iowan Old Style",serif; --wrap:1420px; --gut:clamp(18px,3.4vw,44px); --r:14px; --rs:9px; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--paper);color:var(--ink); font:400 17.5px/1.62 var(--txt);font-feature-settings:"kern","liga";} img{max-width:100%;height:auto;display:block} a{color:var(--violet)} a:hover{color:var(--deep)} h1,h2,h3,h4,.bg-dsp{font-family:var(--dsp);font-weight:700;letter-spacing:-.012em;line-height:1.1;margin:0} h1{font-size:clamp(34px,4.6vw,58px);letter-spacing:-.022em} h2{font-size:clamp(26px,3vw,38px)} h3{font-size:clamp(19px,1.6vw,23px)} p{margin:0 0 1em} .bg-wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)} .bg-kicker{font:700 11.5px/1 var(--dsp);letter-spacing:.19em;text-transform:uppercase;color:var(--blushInk);margin:0 0 14px} .bg-kicker.on-dark{color:var(--lilac)} .bg-lede{font-size:clamp(18px,1.5vw,21px);color:var(--inkSoft)} .bg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ------------------------------------------------------------- шапка */ /* Две полосы, как у образца: цветная со знаком и белая с разделами. На телефоне вторая полоса сворачивается в раскрывашку — три ряда ссылок в шапке запрещены чек-листом. */ .bg-top{background:var(--lilac);color:var(--ink)} .bg-top .bg-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:58px} .bg-tag{font:700 10.5px/1 var(--dsp);letter-spacing:.24em;text-transform:uppercase;color:var(--deep);flex:1 1 0;min-width:0} .bg-mark{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)} .bg-mark svg{display:block} .bg-word{font:800 21px/1 var(--dsp);letter-spacing:.2em;text-transform:uppercase} .bg-topright{flex:1 1 0;min-width:0;text-align:right;font:600 12.5px/1 var(--dsp);letter-spacing:.1em;text-transform:uppercase} .bg-topright a{color:var(--deep);text-decoration:none;border-bottom:1px solid rgba(44,35,80,.35);padding-bottom:2px} .bg-nav{background:var(--paper);border-bottom:1px solid var(--line);position:relative;z-index:5} .bg-nav .bg-wrap{display:flex;justify-content:center;min-height:52px;align-items:center;flex-wrap:wrap} .bg-navdesk{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(14px,2.2vw,32px)} .bg-nav a{font:600 13.5px/1 var(--dsp);letter-spacing:.075em;text-transform:uppercase;color:var(--ink); text-decoration:none;padding:6px 0;border-bottom:2px solid transparent} .bg-nav a:hover{border-bottom-color:var(--lilac)} .bg-nav a[aria-current]{border-bottom-color:var(--deep);color:var(--deep)} .bg-burger{display:none} @media (max-width:520px){ .bg-word{font-size:17px;letter-spacing:.14em} .bg-topright{font-size:11px;letter-spacing:.06em} .bg-mark svg{width:24px;height:24px} } @media (max-width:900px){ .bg-tag{display:none} .bg-top .bg-wrap{justify-content:center} .bg-topright{flex:0 0 auto} .bg-nav .bg-wrap{justify-content:flex-start;padding-top:6px;padding-bottom:6px} .bg-burger{display:block;width:100%} .bg-burger>summary{list-style:none;cursor:pointer;font:700 12.5px/1 var(--dsp);letter-spacing:.14em; text-transform:uppercase;padding:12px 0;color:var(--deep);display:flex;justify-content:space-between;align-items:center} .bg-burger>summary::-webkit-details-marker{display:none} .bg-burger>summary::after{content:"+";font-size:19px;line-height:1} .bg-burger[open]>summary::after{content:"–"} .bg-burger nav{display:flex;flex-direction:column;gap:2px;padding-bottom:10px} .bg-burger nav a{padding:9px 0;border-bottom:1px solid var(--lineSoft)} .bg-navdesk{display:none} } /* ------------------------------------------------------------- герой */ /* ПРАВИЛО ПОХОЖЕСТИ (§1). Первая версия героя была раздельным экраном «панель слева, кадр справа» — ровно то же, что у трёх предыдущих сайтов портфеля (ukeetap, resare, anjank): по четырём главным рядом угадывался один автор. Здесь кадр идёт полосой во всю ширину, а панель ЛЕЖИТ НА НЁМ карточкой и свешивается в следующую секцию. Панель непрозрачная: текст читается и тогда, когда фотография не приехала (правило владельца 25.08), это проверяет отдельный страж в браузерном аудите. */ .bg-hero{position:relative;background:var(--lilac)} /* Полоса героя — ТРИПТИХ, а не один кадр. Один кадр в полосе 4.7:1 режется в щель: фирменная съёмка бренда почти квадратная (1760x1500), и в такой полосе от неё остаются руки и спинка стула. Три кадра дают каждому пропорцию около 1.6:1, то есть честный кроп. */ .bg-hero-shot{position:relative;height:clamp(240px,33vh,350px);overflow:hidden; display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:2px} .bg-hero-shot>span{position:relative;overflow:hidden;display:block} .bg-hero-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .bg-hero-shot>span:nth-child(1) img{object-position:44% 40%} .bg-hero-shot>span:nth-child(2) img{object-position:50% 30%} .bg-hero-shot>span:nth-child(3) img{object-position:50% 45%} @media (max-width:760px){.bg-hero-shot{grid-template-columns:1fr}.bg-hero-shot>span:nth-child(n+2){display:none}} .bg-hero-panel{background:var(--lilac);border-radius:var(--r); padding:clamp(22px,2.2vw,34px) clamp(22px,2.4vw,38px);min-width:0; box-shadow:0 18px 44px rgba(35,29,51,.16)} .bg-hero-wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut); position:relative;z-index:2;margin-top:clamp(-185px,-15vw,-90px)} .bg-hero-panel{width:min(660px,58%)} .bg-hero-panel h1{color:var(--ink);max-width:16ch;font-size:clamp(30px,3.2vw,44px)} .bg-hero-panel p{color:var(--deep);font-size:clamp(16px,1.15vw,18px);line-height:1.5;margin:12px 0 0;max-width:52ch} .bg-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px} .bg-hero-facts{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:18px;padding-top:14px;border-top:1px solid rgba(44,35,80,.22)} .bg-hero-facts b{display:block;font:700 19px/1 var(--dsp);color:var(--deep)} .bg-hero-facts span{font:600 10px/1.3 var(--dsp);letter-spacing:.12em;text-transform:uppercase;color:var(--inkSoft)} /* Полоса департамента: та же идея, кадр ниже и панель уже. */ .bg-hero.dept .bg-hero-shot{height:clamp(240px,30vh,320px)} .bg-hero.dept .bg-hero-panel{width:min(620px,54%)} @media (max-width:900px){ .bg-hero-wrap{margin-top:-40px} /* Обе формы панели, иначе правило департамента (.dept, объявлено ниже базового) оставляет на телефоне колонку в 54% и пустую сирень справа. */ .bg-hero-panel,.bg-hero.dept .bg-hero-panel{width:auto} .bg-hero-shot{height:clamp(240px,42vw,330px)} } /* ------------------------------------------------------------ секции */ .bg-sec{padding:clamp(46px,5vw,84px) 0} .bg-hero + .bg-sec{padding-top:clamp(26px,2.6vw,38px)} .bg-sec.tint{background:var(--lilacTint)} .bg-sec.pale{background:var(--lilacPale)} .bg-sec.blush{background:var(--blush)} .bg-sec.sand{background:var(--sand)} .bg-sec.paper2{background:var(--paper2)} .bg-sec.dark{background:var(--deep);color:var(--paper)} .bg-sec.dark h2,.bg-sec.dark h3{color:var(--paper)} .bg-sec.dark p{color:#E6E2F6} .bg-sec.dark a{color:var(--lilac)} .bg-head{margin-bottom:clamp(18px,1.8vw,26px)} .bg-head p{max-width:78ch;color:var(--inkSoft);margin-top:10px} .bg-head.row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap} .bg-more{font:700 12.5px/1.35 var(--dsp);letter-spacing:.12em;text-transform:uppercase;text-decoration:none; color:var(--deep);border-bottom:2px solid var(--lilac);padding-bottom:4px;white-space:nowrap;max-width:100%} /* На узком экране длинный брендовый анкор переносится: с nowrap он выносил страницу за край на 320px (331px при 320px, поймано браузерным аудитом). */ @media (max-width:560px){.bg-more{white-space:normal}} .bg-more:hover{border-bottom-color:var(--deep)} /* ------------------------------------------------------------ кнопки */ .bg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; font:700 13.5px/1 var(--dsp);letter-spacing:.055em;text-decoration:none; padding:12px 20px;border-radius:999px;border:1.5px solid transparent;cursor:pointer} .bg-btn.solid{background:var(--deep);color:var(--paper)} .bg-btn.solid:hover{background:var(--violet);color:var(--paper)} .bg-btn.ghost{background:transparent;color:var(--deep);border-color:var(--deep)} .bg-btn.ghost:hover{background:var(--deep);color:var(--paper)} .bg-btn.pale{background:var(--paper);color:var(--deep)} .bg-btn.pale:hover{background:var(--lilacTint)} /* --------------------------------------------------------- карточка */ /* Лицевая часть карточки — своя (в библиотеку не кладётся): подложка-плита под белый пакшот, надстрока-силуэт, рейтинг ТЕКСТОМ, ряд расцветок. */ .bg-card{display:flex;flex-direction:column;background:var(--paper);border-radius:var(--r); border:1px solid var(--line);overflow:hidden;min-width:0} .bg-card:hover{border-color:var(--lilac)} /* КВАДРАТ КАДРА ДЕРЖИТСЯ ГЕОМЕТРИЕЙ, А НЕ СОДЕРЖИМЫМ. В колоночном флексе flex-basis:auto берёт главный размер (высоту) ИЗ СОДЕРЖИМОГО, и aspect-ratio проигрывает: у товара с портретным кадром 375x500 плита вырастала до 410px при ширине 315, и карточки в ряду вставали лесенкой (замерено: 410 / 315 / 410 / 315). Кадр выведен из потока, и высоту плиты считает только соотношение сторон. */ .bg-shot{background:var(--lilacPale);aspect-ratio:1/1;position:relative;flex:0 0 auto;overflow:hidden} .bg-card:nth-child(2n) .bg-shot{background:var(--blush)} .bg-card:nth-child(3n) .bg-shot{background:var(--sand)} .bg-shot img{position:absolute;inset:14px;width:calc(100% - 28px);height:calc(100% - 28px);object-fit:contain;mix-blend-mode:multiply} .bg-card-body{display:flex;flex-direction:column;flex:1;padding:16px 16px 18px;gap:8px} .bg-sil{font:700 10.5px/1 var(--dsp);letter-spacing:.16em;text-transform:uppercase;color:var(--blushInk)} .bg-card-title{font:600 15.5px/1.32 var(--dsp);letter-spacing:-.004em;color:var(--ink)} .bg-spec{font:400 13.5px/1.45 var(--txt);color:var(--inkSoft)} .bg-stars{font:600 12.5px/1 var(--dsp);color:var(--sandInk);letter-spacing:.01em} .bg-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0} .bg-price{font:700 19px/1 var(--dsp);color:var(--deep);font-variant-numeric:tabular-nums} .bg-unavail{font:600 12.5px/1 var(--dsp);color:var(--inkFaint)} .bg-sw{display:flex;gap:5px;flex-wrap:wrap;align-items:center} .bg-sw i{width:13px;height:13px;border-radius:50%;border:1px solid rgba(35,29,51,.24);display:block} .bg-sw b{font:600 11px/1 var(--dsp);color:var(--inkFaint)} .bg-card .bg-act{margin-top:auto;padding-top:4px} .bg-buy{display:flex;align-items:center;justify-content:center;gap:8px;width:100%; background:var(--deep);border-radius:999px;padding:12px 14px;text-decoration:none;border:1.5px solid var(--deep)} .bg-buy:hover{background:var(--violet);border-color:var(--violet)} .bg-buy{font-size:14px} /* Имя класса .buy-label — конвенция портфельного стража размера надписи (buy-label-check): он ищет именно его и именно calc(1em * доля). */ .buy-label{height:calc(1em * 0.75);width:auto;display:block} .bg-buy.on-light{background:var(--paper)} .bg-buy.on-light:hover{background:var(--lilacTint)} .bg-note{font:400 12px/1.4 var(--txt);color:var(--inkFaint);margin:7px 0 0;text-align:center} /* ------------------------------------------------------------- сетка */ /* Ровные ряды на флексе: число колонок задаётся переменной, неполный ряд центрируется сам на любой ширине. */ /* Число колонок приходит СТИЛЕМ В РАЗМЕТКЕ (--cols), поэтому медиазапросы НЕ МОГУТ переопределить его через ту же переменную: инлайн-стиль сильнее любого селектора. Первая версия так и жила, и на 390px карточки оставались вчетвером шириной в палец (поймано глазом). Узкие ширины задают flex-basis напрямую, минуя переменную. */ .bg-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(14px,1.5vw,22px);--cols:4;--gg:clamp(14px,1.5vw,22px)} .bg-grid>*{flex:0 1 calc((100% - (var(--cols) - 1) * var(--gg)) / var(--cols));min-width:0} @media (max-width:1180px){.bg-grid>*{flex-basis:calc((100% - 2 * var(--gg)) / 3)}} @media (max-width:820px){.bg-grid>*{flex-basis:calc((100% - var(--gg)) / 2)}} @media (max-width:460px){.bg-grid>*{flex-basis:100%}} /* -------------------------------------------------- текстовые блоки */ /* ТЕКСТ ЗАНИМАЕТ ПОЛОСУ ЦЕЛИКОМ (§5): меру строки держат КОЛОНКИ и сетка, а не поля. Узкой колонки с пустотой по обе стороны на сайте нет. */ .bg-cols{columns:2;column-gap:clamp(28px,3.4vw,56px)} .bg-cols p{break-inside:avoid-column} .bg-cols.three{columns:3} @media (max-width:900px){.bg-cols,.bg-cols.three{columns:1}} .bg-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3vw,52px);align-items:start} .bg-split.wide-left{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)} .bg-split.wide-right{grid-template-columns:minmax(0,1fr) minmax(0,1.45fr)} @media (max-width:900px){.bg-split,.bg-split.wide-left,.bg-split.wide-right{grid-template-columns:1fr}} .bg-fig{margin:0;border-radius:var(--r);overflow:hidden;background:var(--lilacPale)} .bg-fig img{width:100%} .bg-fig.ratio img{aspect-ratio:4/3} /* Кадр, обрезаемый под место осознанно. Класс не крючок: он же задаёт правило обрезки, а стражу говорит, что срезать тут нечего. */ .bg-cover{object-fit:cover} .bg-fig figcaption{font:400 13px/1.45 var(--txt);color:var(--inkSoft);padding:10px 14px 14px} /* ------------------------------------------------------------ плитки */ /* Число колонок задаётся КЛАССОМ, а не инлайн-стилем: инлайн сильнее любого медиазапроса, и на 390px три плитки журнала стояли в ряд по 110px с одним словом в строке (поймано глазом на кадре мобильной главной). */ .bg-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.5vw,22px)} .bg-tiles.three{grid-template-columns:repeat(3,minmax(0,1fr))} .bg-tiles.two{grid-template-columns:repeat(2,minmax(0,1fr))} @media (max-width:980px){.bg-tiles,.bg-tiles.three{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:560px){.bg-tiles,.bg-tiles.three,.bg-tiles.two{grid-template-columns:1fr}} .bg-tile{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:var(--paper); border-radius:var(--r);overflow:hidden;border:1px solid var(--line);min-width:0} .bg-tile:hover{border-color:var(--lilac)} .bg-tile img{aspect-ratio:4/3;object-fit:cover;width:100%} .bg-tile-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:7px;flex:1} .bg-tile h3{font-size:19px} .bg-tile p{font-size:14.5px;line-height:1.5;color:var(--inkSoft);margin:0} .bg-tile .bg-more{margin-top:auto;align-self:flex-start} /* ----------------------------------------------------------- таблицы */ .bg-tw{overflow-x:auto;min-width:0;border-radius:var(--r);border:1px solid var(--line);background:var(--paper)} table.bg-t{width:100%;border-collapse:collapse;min-width:560px;font-family:var(--dsp);font-size:14.5px} table.bg-t caption{text-align:left;padding:16px 18px 0;font:600 13px/1.4 var(--dsp);color:var(--inkSoft)} table.bg-t th{text-align:left;font-weight:700;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--inkSoft);padding:14px 18px;border-bottom:1px solid var(--line);white-space:nowrap} table.bg-t td{padding:13px 18px;border-bottom:1px solid var(--lineSoft);vertical-align:top} table.bg-t tr:last-child td{border-bottom:0} table.bg-t tbody tr:nth-child(2n){background:var(--lilacPale)} table.bg-t td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} table.bg-t td b{font-weight:700;color:var(--deep)} @media (max-width:640px){ table.bg-t{min-width:0} table.bg-t thead{position:absolute;left:-9999px} table.bg-t tr{display:block;border-bottom:1px solid var(--line);padding:6px 0} table.bg-t tbody tr:nth-child(2n){background:transparent} table.bg-t td{display:flex;justify-content:space-between;gap:14px;border:0;padding:7px 16px;text-align:right} table.bg-t td::before{content:attr(data-label);font-weight:700;font-size:11px;letter-spacing:.1em; text-transform:uppercase;color:var(--inkSoft);text-align:left;flex:0 0 auto} table.bg-t td.num{text-align:right} /* В карточном режиме первая ячейка это ИМЯ СТРОКИ, а не значение: без отдельного правила она вставала справа без подписи и читалась как ответ на пустой вопрос (осмотр на 390px). */ table.bg-t td:first-child{justify-content:flex-start;font:700 15px/1.35 var(--dsp); color:var(--deep);padding-top:12px} table.bg-t td:first-child::before{content:none} } /* ---------------------------------------------------------- галерея */ /* Сумма span-ячеек ДОЛЖНА делиться на число колонок, иначе справа дыра и сироты внизу (§5). Десять кадров, два широких: 10 + 2 = 12 ячеек, что делится и на 6, и на 4, и на 2. grid-auto-flow:dense как страховка. */ .bg-gal{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1.1vw,16px);grid-auto-flow:dense} .bg-gal a{display:block;border-radius:var(--rs);overflow:hidden;background:var(--lilacPale);min-width:0} .bg-gal img{width:100%;aspect-ratio:1/1;object-fit:cover} .bg-gal a.tall{grid-row:span 2} .bg-gal a.tall img{aspect-ratio:1/2.06} .bg-gal a.wide{grid-column:span 2} .bg-gal a.wide img{aspect-ratio:2.06/1} @media (max-width:980px){.bg-gal{grid-template-columns:repeat(4,minmax(0,1fr))}} @media (max-width:560px){ .bg-gal{grid-template-columns:repeat(2,minmax(0,1fr))} .bg-gal a.tall{grid-row:auto} .bg-gal a.tall img{aspect-ratio:1/1} } dialog.bg-zoom{border:0;padding:0;background:transparent;max-width:94vw;max-height:94vh} dialog.bg-zoom::backdrop{background:rgba(35,29,51,.86)} dialog.bg-zoom img{max-width:94vw;max-height:94vh;width:auto;border-radius:var(--rs)} /* ------------------------------------------------------------ видео */ .bg-film{border-radius:var(--r);overflow:hidden;background:#1B1531;min-width:0} /* Атрибуты width/height у