/* Asosiy sahifa (news/home.html) uchun moslashuvchan (responsive) qatlam.
------------------------------------------------------------------------
Dizayn 1920px lik qat'iy Figma kadri: `.page` va uning bo'limlari absolyut
koordinatalarda, ichki qutilar esa piksel o'lchamlarda. Bu fayl o'sha
qiymatlarni O'ZGARTIRMAYDI — barcha qoidalar `max-width: 1279.98px` media
so'rovi ichida va faqat `body.is-responsive` bo'lgan sahifada ishlaydi.
1280px va undan keng ekranda bu yerdagi birorta qoida yoqilmaydi, shuning
uchun desktop ko'rinish 1:1 saqlanadi (page-scale.js avvalgidek kichraytiradi).
Bosqichlar:
768px - 1279px -> ikki-uch ustunli oqim (kartalar o'raladi)
768px dan tor -> bitta ustun (telefon)
Nega `!important`: header inline `style` bilan, qolgani generatsiya
qilingan `.n-*` klasslarida chiqarilgan — ustunlikni kafolatlash uchun. */
@media (max-width: 1279.98px) {
/* ---- Sahifa qobig'i: absolyut kadr -> vertikal oqim ---- */
body.is-responsive { overflow-x: hidden; }
body.is-responsive .page {
position: static !important;
width: auto !important;
min-height: 0 !important;
overflow: visible !important;
display: flex !important;
flex-direction: column !important;
gap: 32px;
padding: 0 16px !important;
zoom: 1 !important;
}
/* Header sahifa chekkalaridan kengroq turadi. */
body.is-responsive .page > .header { order: -1 !important; }
body.is-responsive .page > .frame-93,
body.is-responsive .page > .frame-92,
body.is-responsive .page > .frame-375,
body.is-responsive .page > .footer {
position: static !important;
left: auto !important; top: auto !important;
width: auto !important;
height: auto !important;
min-height: 0 !important;
}
/* ---- Header (kabinet sahifalaridagi bilan bir xil xatti-harakat) ---- */
body.is-responsive .header {
position: static !important;
left: auto !important; top: auto !important;
width: auto !important;
height: auto !important;
margin: 0 -16px 4px !important;
padding: 12px 16px 0 !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 12px !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
body.is-responsive .header > * {
position: static !important;
left: auto !important; top: auto !important;
}
body.is-responsive .header > .lnk-img {
order: 1;
flex: 1 0 100% !important;
width: 118px !important;
height: 40px !important;
margin: 0 0 4px !important;
}
/* Ijtimoiy tarmoqlar bardan chiqarildi — endi "to'liq menyu" modalida
(nav-modal.css, .nav-modal-social-links) ko'rinadi. */
body.is-responsive .header > .social-links { display: none !important; }
/* Bo'limlar qatori endi o'ralmaydi: sig'maganda gorizontal siljiydi,
hamburger tugmasi orqali esa BARCHASI modalda ko'rinadi. */
body.is-responsive .header > .nav-menu-row {
order: 2;
/* `flex-basis: 0` — bo'lim qatori boshqa header elementlari (til, qidiruv)
bilan BIR QATORDA joylashishi uchun: `auto` bo'lganda uning "tabiiy"
eni (barcha bo'limlar siqilmagan holatdagi eni) qatorga sig'maganda
flexbox uni yolg'iz o'z qatoriga chiqarib yuborardi. */
flex: 1 1 0% !important;
min-width: 0;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
gap: 8px !important;
/* O'zining ichidagi ikkita bolasi (bo'limlar + hamburger) doim BIR
QATORDA qolsin — aks holda umumiy `.page :is(div, ...)` qoidasi
(flex-wrap: wrap, !important siz) uni ikki qatorga bo'lib yuborardi. */
flex-wrap: nowrap !important;
}
body.is-responsive .header > .nav-menu-row > .nav-menu {
flex: 1 1 auto !important;
min-width: 0;
width: auto !important;
height: auto !important;
gap: 2px !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
scrollbar-width: none;
}
body.is-responsive .header > .nav-menu-row > .nav-menu::-webkit-scrollbar { display: none; }
body.is-responsive .header > .nav-menu-row > .nav-menu > .navigation-item {
flex: 0 0 auto !important;
align-self: auto !important;
padding: 8px 10px !important;
white-space: nowrap !important;
}
body.is-responsive .header > .nav-menu-row > .nav-menu-toggle { display: inline-flex !important; }
body.is-responsive .header > .language-switcher { order: 3; margin-left: auto !important; gap: 16px !important; }
/* Obuna narxi va "Qidiruv" matnli tugma bu enlikda sig'may qoladi —
obuna nishoni yashiriladi, qidiruv esa faqat ikonka bo'lib qoladi. */
body.is-responsive .header > .duration-badge-container { display: none !important; }
body.is-responsive .header > .button {
order: 4;
flex: none !important;
width: 40px !important;
height: 40px !important;
padding: 0 !important;
border-radius: 50%;
justify-content: center !important;
}
body.is-responsive .header > .button > .txt.search { display: none !important; }
/* 1920px enlikdagi ingichka chiziq — endi header'ning o'z pastki chegarasi. */
body.is-responsive .header > .rule,
body.is-responsive .header > .hdr-filters { display: none !important; }
/* ---- Umumiy: qat'iy o'lchamli tuzilma qutilari -> moslashuvchan ----
Bezak elementlar (ikonka, nuqta, avatar, rasm to'ldiruvchi) ro'yxatdan
chiqarilgan — ular dizayndagi o'z o'lchamida qoladi. */
body.is-responsive .page :is(div, article, section, nav, aside, footer, form):not(.icon):not(.dot):not(.category-icon):not(.rectangle-1):not(.avatar-1-1):not(.fig-bg):not(.has-img):not(.image):not(.mockup):not(.rule):not(.frame-335):not(.footer) {
width: auto !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
flex-wrap: wrap;
}
/* Ajratuvchi chiziqlar dizaynda qat'iy enlikda — endi konteyner bo'ylab. */
body.is-responsive .page .rule {
width: auto !important;
max-width: 100% !important;
align-self: stretch !important;
}
/* Matn tugunlari qat'iy `width`/`height` va `white-space: pre` bilan
chiqarilgan — tor ekranda ular qutidan chiqib ketardi. */
body.is-responsive .page .txt {
max-width: 100% !important;
width: auto !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
white-space: normal !important;
overflow-wrap: break-word;
}
/* Figma rasm to'ldirish matritsalari 1920px kadr uchun hisoblangan; boshqa
o'lchamda ular rasmni siljitib yuboradi. Rang filtri saqlanadi. */
body.is-responsive .page .fig-bg {
width: 100% !important;
height: 100% !important;
}
body.is-responsive .page .fig-bg > .fig-img {
position: absolute !important;
left: 0 !important; top: 0 !important;
transform: none !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
/* Karta ichidagi rasm bloki — balandligi dizayndagidek, eni karta bo'ylab. */
body.is-responsive .page .image {
width: 100% !important;
max-width: 100% !important;
}
/* Fon rasmli bloklar: eni har doim moslashadi, balandlik esa faqat ichida
matn bo'lsa kontent bo'yicha o'lchanadi. Matnsiz blok (masalan gazeta
muqovasi) `height: auto` da nolga yig'ilib, rasm butunlay ko'rinmay
qolardi — unda dizayndagi balandlik saqlanadi, rasm `cover` bilan
qirqiladi. */
body.is-responsive .page .has-img { max-width: 100% !important; }
body.is-responsive .page .has-img:has(.txt) {
width: auto !important;
height: auto !important;
min-height: 0 !important;
}
/* Matnsiz blokda oqimdagi kontent yo'q (rasm — absolyut `.fig-bg`), shuning
uchun `width: auto` uni nolga siqib qo'yardi. */
body.is-responsive .page .has-img:not(:has(.txt)) { width: 100% !important; }
/* Qat'iy enlikdagi ikonka/rasmlar (masalan 712px lik podkast logotipi). */
body.is-responsive .page img { max-width: 100% !important; }
body.is-responsive .page img.icon.podcast { width: auto !important; height: auto !important; }
/* Rasm ustidagi "REKLAMA" yorlig'i va video kartadagi "play" tugmasi
dizayn kadri uchun hisoblangan koordinatada turadi — tor kartada ular
qutidan chiqib ketardi, endi markazga joylashadi. */
body.is-responsive .page .image > .txt,
body.is-responsive .page .gridicons-play {
left: 50% !important;
right: auto !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
text-align: center !important;
}
/* Dizayndagi 2 ustunli to'r: ustun enliklari `1fr` bo'lgani uchun o'zi
torayadi, faqat qatorlar kontent bo'yicha o'lchansin. */
body.is-responsive .page .frame-85 {
gap: 24px !important;
grid-template-rows: auto !important;
grid-auto-rows: auto !important;
}
/* ---- O'raladigan qatorlar ----
Dizaynda bo'lim ichidagi ustunlar va kartalar qat'iy enlikdagi flex
qatorlar. Tor ekranda ular o'raladi: `flex-basis` — element qaysi
enlikdan boshlab keyingi qatorga tushishini belgilaydi.
`flex` faqat QATOR konteynerlarining bevosita bolalariga beriladi:
ustunli (column) konteynerda `flex-basis` balandlikni cheklab, elementni
ikkinchi "ustun"ga o'tkazib yuborardi. */
/* Bo'lim darajasidagi ustunlar: 480px dan tor bo'lsa — ustma-ust. */
body.is-responsive .page :is(.frame-93, .frame-76, .frame-79, .frame-80, .frame-86, .frame-87, .frame-90) > * {
flex: 1 1 480px !important;
min-width: 0 !important;
align-self: auto !important;
}
/* Karta qatorlari: teng ustunli to'r. Flex bilan oxirgi (yolg'iz qolgan)
karta butun qatorni egallab, qolganlaridan kattayib ketardi — `grid`
ustun enligini bir xil ushlab turadi. Dizayndagi `gap` saqlanadi. */
body.is-responsive .page :is(.frame-92, .frame-51, .frame-54, .frame-343),
body.is-responsive .page > .frame-375 > .frame-349 > .frame-356 {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
align-items: stretch !important;
}
body.is-responsive .page :is(.frame-92, .frame-51, .frame-54, .frame-343) > *,
body.is-responsive .page > .frame-375 > .frame-349 > .frame-356 > * {
width: auto !important;
min-width: 0 !important;
align-self: auto !important;
}
/* Fon rasmli kartalar matn balandligiga qarab yig'ilib qolmasin. */
body.is-responsive .page .has-img[class*="card-"] { min-height: 260px !important; }
/* ---- «XXI asr gazetasi» qatori ------------------------------------------
Dizaynda qator faqat strelka tugmalari bilan siljiydi (`overflow-x:
hidden`) va yuqoridagi to'r qoidasi unga `.frame-349 > .frame-356` orqali
tegishli edi. Qator `.gazeta-issues-wrap` ichiga o'ralgach o'sha tanlagich
mos kelmay qoldi va qator oddiy `flex-wrap` ga tushib, 6 ta muqova 70px
oraliq bilan ustma-ust — 3500px+ balandlikda — chiziladi. Tor ekranda u
barmoq bilan suriladigan, kartochkaga yopishadigan karusel bo'ladi. */
body.is-responsive .page .gazeta-issues-wrap { align-self: stretch !important; }
body.is-responsive .page .gazeta-issues-row {
display: flex !important;
flex-wrap: nowrap !important;
gap: 20px !important;
overflow-x: auto !important;
scroll-snap-type: x mandatory;
touch-action: pan-x pan-y;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
/* Qator sahifa chekkasidan tashqariga chiqadi — keyingi kartochkaning
bir qismi ko'rinib, yana material borligi bilinadi. */
margin-right: calc(-1 * var(--edge, 16px)) !important;
padding-right: var(--edge, 16px) !important;
}
/* Kartochka eni `flex-basis` orqali: yuqoridagi umumiy qoida barcha
`div` larning `width` ini `auto` ga majburlaydi. */
body.is-responsive .page .gazeta-issues-row > .gazeta-issue-card {
flex: 0 0 min(62vw, 240px) !important;
scroll-snap-align: start;
gap: 12px !important;
}
body.is-responsive .page .has-img.gazeta-issue-cover {
width: 100% !important;
height: auto !important;
aspect-ratio: 385 / 436;
align-self: stretch !important;
}
body.is-responsive .page .gazeta-issue-title {
font-size: clamp(17px, 2vw, 26px) !important;
line-height: 1.25 !important;
}
body.is-responsive .page .gazeta-issue-number { font-size: 15px !important; }
/* Strelkalar dizaynda qatordan tashqarida (`left/right: -23px`, `top: 218px`)
— 16px lik sahifa chekkasida ular ekrandan chiqib, gorizontal skrol hosil
qilardi. Endi ular qator ichida, balandligi bo'yicha markazda. */
body.is-responsive .page .gazeta-issues-nav {
top: 40% !important;
width: 40px !important;
height: 40px !important;
}
body.is-responsive .page .gazeta-issues-prev { left: 4px !important; }
body.is-responsive .page .gazeta-issues-next { right: 4px !important; }
/* ---- Bo'limlar orasidagi masofa ---- */
body.is-responsive .page > .frame-375 { gap: 36px !important; }
body.is-responsive .page > .frame-93 { gap: 24px !important; }
body.is-responsive .page > .frame-92 { gap: 20px !important; }
/* ---- "group-*" bo'limlari: sarlavha/kartalar/tugma absolyut edi ---- */
body.is-responsive .page > .frame-375 > [class*="group-"] {
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
align-items: stretch !important;
}
body.is-responsive .page > .frame-375 > [class*="group-"] > * {
position: static !important;
left: auto !important; top: auto !important;
}
/* DOM tartibi: sarlavha yuqorida (order: 1), kartalar o'rtada (order: 2), tugma oxirida va markazda (order: 3). */
body.is-responsive .page > .frame-375 > [class*="group-"] > .frame-53 {
order: 1 !important;
align-self: flex-start !important;
}
body.is-responsive .page > .frame-375 > [class*="group-"] > .frame-54 {
order: 2 !important;
}
body.is-responsive .page > .frame-375 > [class*="group-"] > :is(a, div).button {
order: 3 !important;
align-self: center !important;
margin: 16px auto 0 !important;
flex: none !important;
}
/* ---- Ilova reklamasi banneri: telefon maketlari absolyut koordinatada ---- */
body.is-responsive .page > .frame-375 > .banner {
position: relative !important;
display: flex !important;
padding: 28px 20px !important;
min-height: 0 !important;
}
body.is-responsive .page > .frame-375 > .banner > .frame-332 {
position: static !important;
width: auto !important;
flex: 1 1 auto !important;
}
/* Maketlar 740px/1067px dan boshlanadi — tor ekranda ular kadrdan chiqadi. */
body.is-responsive .page > .frame-375 > .banner > .mockup { display: none !important; }
/* ---- Obuna bo'limlari (frame-357 / 355 / 346 / 356) ---- */
body.is-responsive .page > .frame-375 > :is(.frame-357, .frame-355, .frame-346, .frame-356) {
position: relative !important;
display: flex !important;
flex-direction: column !important;
gap: 24px !important;
align-items: stretch !important;
}
/* Ikki narx banneri — joylashuvni yuqoridagi karta to'ri qoidasi beradi. */
/* ---- Obuna kartasi ichidagi bo'shliq va «Obuna bo'lish» tugmasi ----
Dizaynda karta balandligi qat'iy (380px) va bolalari `space-between`
bilan yoyilgan. Mobil oqimda balandlik "auto" ga o'tgani uchun narx,
imkoniyatlar ro'yxati va tugma bir-biriga yopishib qolardi — shuning
uchun aniq `gap` beriladi. Tugma esa Figma'dan 64px balandlik va
o'tkir burchak bilan kelgan; telefonda u oddiy to'rtburchakdek
ko'rinadi, shuning uchun sezilarli chegara va radius bilan
barmoqqa mo'ljallangan o'lchamga keltiriladi. */
body.is-responsive .page .banner:has(> .frame-351) {
justify-content: flex-start !important;
gap: 20px !important;
padding: 20px !important;
}
body.is-responsive .page .banner:has(> .frame-351) > .frame-351 {
align-self: stretch !important;
}
body.is-responsive .page .banner > :is(a, div).button {
align-self: stretch !important;
width: auto !important;
max-width: 100% !important;
height: auto !important;
min-height: 52px !important;
padding: 14px 20px !important;
border-radius: 10px !important;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12) !important;
}
body.is-responsive .page .banner > :is(a, div).button > .txt {
width: auto !important;
height: auto !important;
font-size: 16px !important;
line-height: 22px !important;
white-space: nowrap !important;
text-align: center !important;
}
body.is-responsive .page > .frame-375 > :is(.frame-357, .frame-355, .frame-346, .frame-356) > .frame-343 {
gap: 20px !important;
align-items: stretch !important;
}
/* Narx yorliqlari («6 Oylik» va «Bir yillik») — ikkalasi ham endi o'z
kartasi ichida (markup tuzatildi), shuning uchun joylashuv karta
chekkasiga nisbatan. Ilgari «Bir yillik» bo'limning bevosita bolasi
edi va `top: -20px` bo'lim balandligiga nisbatan hisoblanib, yorliq
"OBUNA" sarlavhasi ustiga chiqib ketardi. */
body.is-responsive .page .frame-335 {
position: absolute !important;
left: auto !important;
right: 12px !important;
top: -18px !important;
bottom: auto !important;
}
/* ---- Bo'limlar: Dolzarb, Jamiyat, Madaniyat, Turizm, Texnologiya, Partiya, Gazeta -----------------
Dizaynda sarlavha qatorida «Barchasini ko'rish» tugmasi turgan (`frame-376`,
`frame-84`, `frame-82`, `frame-358`). Mobil versiyada esa foydalanuvchi
talabiga ko'ra «Barchasini ko'rish» bo'lim oxirida va o'rtada tursin.
`display: contents` orqali sarlavha yuqorida (order: 1), kartalar o'rtada
(order: 2), tugma esa bo'lim oxirida markazda (order: 3) joylashadi. */
/* `.frame-347`/`.frame-348`/`.frame-349` klasslari Figma'da qayta
ishlatilgan: bo'lim o'rovchisidan tashqari «Tarif ichida:» ro'yxatidagi
belgi+matn qatorlari ham shu nomni oladi. `:not(:has(> img))` o'sha
qatorlarni chetlab o'tadi — aks holda ular ustunga aylanib, katakcha
bilan matn alohida satrga tushib qolardi. */
body.is-responsive .page :is(.frame-77, .frame-81, .frame-89, .frame-83,
.frame-347, .frame-348, .frame-349):not(:has(> img.material-symbols-check-rounded)) {
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
gap: 20px !important;
align-items: stretch !important;
}
body.is-responsive .page :is(.frame-77, .frame-81, .frame-347, .frame-348) > .frame-376,
body.is-responsive .page .frame-89 > .frame-84,
body.is-responsive .page .frame-83 > .frame-82,
body.is-responsive .page .frame-349 > .frame-358 {
display: contents !important;
}
body.is-responsive .page :is(.frame-77, .frame-347) .frame-12,
body.is-responsive .page :is(.frame-81, .frame-89, .frame-83, .frame-348) .frame-53,
body.is-responsive .page .frame-349 .txt.xxi-asr-gazetasi {
order: 1 !important;
align-self: flex-start !important;
}
body.is-responsive .page :is(.frame-77, .frame-347) > .frame-76,
body.is-responsive .page :is(.frame-81, .frame-348) > .frame-80,
body.is-responsive .page .frame-89 > .frame-88,
body.is-responsive .page .frame-83 > .frame-63,
body.is-responsive .page .frame-349 > .gazeta-issues-wrap {
order: 2 !important;
}
/* Haqiqiy DOM'da tugma sarlavha qatori (`frame-376`/`frame-84`/`frame-82`/
`frame-358`) ICHIDA emas, balki bo'lim o'rovchisining (`frame-77` va h.k.)
TO'G'RIDAN-TO'G'RI bolasi — shuning uchun selektor o'rovchiga qarab tanlaydi,
aks holda tugma order olmay (standart order:0) sarlavha/kartalardan OLDIN
chiqib qolardi. */
body.is-responsive .page :is(.frame-77, .frame-81, .frame-89, .frame-83,
.frame-347, .frame-348, .frame-349) > :is(a, div).button {
order: 3 !important;
align-self: center !important;
margin: 16px auto 0 !important;
}
/* Texnologiya bo'limi ichidagi tablar qatoridagi ikkinchi ortiqcha tugmani yashirish */
body.is-responsive .page .tech-tabs .frame-302 > :is(a, div).button {
display: none !important;
}
/* Bizning korrespondentlarimiz va Eng ko'p o'qilganlar tugmalari ham markazda */
body.is-responsive .page :is(.frame-66, .frame-68) > :is(a, div).button {
align-self: center !important;
margin: 16px auto 0 !important;
}
/* ---- Bo'limlar oxiridagi «Barchasini ko'rish» tugmalari ------------------
Mobil versiyada har bir bo'limning eng oxirida va markazda turadi.
Tugma haqiqiy DOM'da sarlavha qatori (`frame-376`/`frame-84`/`frame-82`/
`frame-358`) ICHIDA emas, bo'lim o'rovchisining (`frame-77` va h.k.)
TO'G'RIDAN-TO'G'RI bolasi — shuning uchun o'rovchi klasslari ham
ro'yxatga qo'shilgan (aks holda bu qoida ishlamay, tugma standart tor
enda ikki qatorga bo'linib qolardi). */
body.is-responsive .page :is([class*="group-"], .frame-376, .frame-84,
.frame-82, .frame-358, .frame-66, .frame-68,
.frame-77, .frame-81, .frame-89, .frame-83,
.frame-347, .frame-348, .frame-349)
> :is(a, div).button {
width: auto !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
flex: 0 0 auto !important;
display: inline-flex !important;
justify-content: center !important;
align-items: center !important;
align-self: center !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 10px 24px !important;
border-radius: 8px !important;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18) !important;
background: transparent !important;
text-decoration: none !important;
}
body.is-responsive .page :is([class*="group-"], .frame-376, .frame-84,
.frame-82, .frame-358, .frame-66, .frame-68,
.frame-77, .frame-81, .frame-89, .frame-83,
.frame-347, .frame-348, .frame-349)
> :is(a, div).button > .txt {
width: auto !important;
height: auto !important;
white-space: nowrap !important;
text-align: center !important;
font-size: 15px !important;
font-weight: 500 !important;
line-height: 22px !important;
color: #1a1a1a !important;
}
/* ---- Media loyihalar / Podkastlar (`.frame-351`) ------------------------
Dizaynda ikkita 760x509 karta yonma-yon (`.frame-80`).
Mobil versiyada ular bitta ustunga tushadi, to'liq aspect-ratio bilan
ochiladi va rasm ustidagi barcha matnlar, logolar, tugmalar va
ma'lumot bloklari chiroyli moslashadi. */
body.is-responsive .page .frame-351 {
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
}
body.is-responsive .page .frame-351 > .frame-53 {
align-self: flex-start !important;
}
body.is-responsive .page .frame-351 .yangi-medi-loyihalar {
font-size: clamp(20px, 3.5vw, 28px) !important;
line-height: 1.25 !important;
white-space: normal !important;
}
body.is-responsive .page .frame-351 > .frame-80 {
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
width: 100% !important;
align-self: stretch !important;
}
/* Ikkala podkast kartochkasi (`.frame-56` va `.frame-57`) */
body.is-responsive .page .frame-351 .has-img:is(.frame-56, .frame-57) {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 280px !important;
aspect-ratio: 16 / 10;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
align-items: stretch !important;
padding: 16px !important;
border-radius: 12px !important;
overflow: hidden !important;
position: relative !important;
box-sizing: border-box !important;
}
/* Fon rasmi ustiga gradient parda: matnlar va logolar aniq o'qilishi uchun */
body.is-responsive .page .frame-351 .has-img:is(.frame-56, .frame-57) > .fig-bg::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0.65) 100%) !important;
pointer-events: none !important;
}
/* Kartochka tepasidagi qator: XXI ASR logotipi va «Barchasini ko'rish» */
body.is-responsive .page .frame-351 .frame-377 {
position: relative !important;
z-index: 2 !important;
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: center !important;
width: 100% !important;
gap: 10px !important;
margin: 0 !important;
padding: 0 !important;
}
body.is-responsive .page .frame-351 .frame-377 > img.icon.logo {
height: clamp(26px, 5.5vw, 34px) !important;
width: auto !important;
max-width: 100px !important;
object-fit: contain !important;
flex: 0 0 auto !important;
}
/* Kartochka ichidagi «Barchasini ko'rish» tugmasi (shaffof fon, oq chegara) */
body.is-responsive .page .frame-351 .frame-377 > :is(a, div).button {
width: auto !important;
height: auto !important;
min-height: 0 !important;
flex: 0 0 auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 6px 14px !important;
border-radius: 6px !important;
background: rgba(0, 0, 0, 0.3) !important;
backdrop-filter: blur(6px) !important;
-webkit-backdrop-filter: blur(6px) !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75) !important;
margin: 0 !important;
text-decoration: none !important;
}
body.is-responsive .page .frame-351 .frame-377 > :is(a, div).button > .txt {
font-size: 13px !important;
line-height: 18px !important;
white-space: nowrap !important;
color: #ffffff !important;
font-weight: 500 !important;
}
/* 1-karta: "PODCAST" yozuvi kartaning pastki qismida o'rtada */
body.is-responsive .page .frame-351 .frame-56 > img.icon.podcast {
position: relative !important;
z-index: 2 !important;
margin-top: auto !important;
margin-bottom: 2px !important;
width: min(85%, 280px) !important;
height: auto !important;
align-self: center !important;
display: block !important;
opacity: 0.95 !important;
mix-blend-mode: normal !important;
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5)) !important;
}
/* 2-karta: oq ma'lumotlar bloki pastda to'liq joylashadi */
body.is-responsive .page .frame-351 .frame-57 > .container.n-137-8386 {
position: relative !important;
z-index: 2 !important;
margin-top: auto !important;
width: 100% !important;
align-self: stretch !important;
background-color: rgba(255, 255, 255, 0.96) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border-radius: 10px !important;
padding: 12px 14px !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: center !important;
gap: 4px !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
box-sizing: border-box !important;
}
/* Sarlavha matni: 15px, qalin, 2 qatorda kesiladi */
body.is-responsive .page .frame-351 .frame-57 .n-137-8388 {
width: 100% !important;
height: auto !important;
font-size: 15px !important;
font-weight: 600 !important;
line-height: 1.35 !important;
letter-spacing: -0.2px !important;
color: #111111 !important;
white-space: normal !important;
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
line-clamp: 2 !important;
overflow: hidden !important;
}
/* Muallif / Boshlovchi matni: 13px, kulrang */
body.is-responsive .page .frame-351 .frame-57 .n-137-8389 {
width: 100% !important;
height: auto !important;
font-size: 13px !important;
font-weight: 400 !important;
line-height: 1.3 !important;
color: #666666 !important;
white-space: normal !important;
}
/* «Texnologiya» bo'limi yorliqlari (`