/*
 * Q-Dash Insights — RTL / LTR Bidirectional CSS v2
 * Full fix: direction, layout, sidebar order, nav, ads
 */

/* ── BASE DIRECTION ─────────────────────────────────────────── */
html[dir="rtl"] { direction: rtl; }
html[dir="ltr"] { direction: ltr; }

html[dir="rtl"] body { direction: rtl; text-align: right; }
html[dir="ltr"] body { direction: ltr; text-align: left; }

html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,
html[dir="rtl"] h4,html[dir="rtl"] h5,html[dir="rtl"] h6,
html[dir="rtl"] p,html[dir="rtl"] li,html[dir="rtl"] td,
html[dir="rtl"] th,html[dir="rtl"] label { text-align: right; }

html[dir="ltr"] h1,html[dir="ltr"] h2,html[dir="ltr"] h3,
html[dir="ltr"] h4,html[dir="ltr"] h5,html[dir="ltr"] h6,
html[dir="ltr"] p,html[dir="ltr"] li,html[dir="ltr"] td,
html[dir="ltr"] th,html[dir="ltr"] label { text-align: left; }

/* Always-centered elements */
html[dir="rtl"] .tc, html[dir="ltr"] .tc,
html[dir="rtl"] .ins-hero h1, html[dir="ltr"] .ins-hero h1,
html[dir="rtl"] .ins-hero p,  html[dir="ltr"] .ins-hero p,
html[dir="rtl"] .ins-badge,   html[dir="ltr"] .ins-badge,
html[dir="rtl"] .sec-hd,      html[dir="ltr"] .sec-hd,
html[dir="rtl"] .sec-hd h2,   html[dir="ltr"] .sec-hd h2,
html[dir="rtl"] .sec-hd p,    html[dir="ltr"] .sec-hd p,
html[dir="rtl"] .cat-nav,     html[dir="ltr"] .cat-nav,
html[dir="rtl"] .btn-row,     html[dir="ltr"] .btn-row,
html[dir="rtl"] .empty-state, html[dir="ltr"] .empty-state,
html[dir="rtl"] .pagination,  html[dir="ltr"] .pagination,
html[dir="rtl"] .ins-footer-btm, html[dir="ltr"] .ins-footer-btm {
  text-align: center !important;
}

/* ── MAIN LAYOUT: CONTENT + SIDEBAR ────────────────────────── */
/*
 * DOM order: <div.ins-main-content> first, <aside.sidebar> second
 *
 * RTL (Arabic): Sidebar يمين, Content يسار
 *   → use flexbox with row-reverse so sidebar (2nd in DOM) appears RIGHT
 *
 * LTR (English): Content يسار, Sidebar يمين
 *   → normal flex row, content left, sidebar right
 */
.g-main {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  width: 100%;
}

/* LTR: content on left, sidebar on right (natural DOM order) */
html[dir="ltr"] .g-main {
  flex-direction: row;
}
html[dir="ltr"] .ins-main-content {
  flex: 1;
  min-width: 0;
  order: 1;
}
html[dir="ltr"] .sidebar {
  width: 300px;
  min-width: 280px;
  flex-shrink: 0;
  order: 2;
}

/* RTL: sidebar on right, content on left */
html[dir="rtl"] .g-main {
  flex-direction: row;
}
html[dir="rtl"] .ins-main-content {
  flex: 1;
  min-width: 0;
  order: 2;  /* content second visually = LEFT in RTL flex */
}
html[dir="rtl"] .sidebar {
  width: 300px;
  min-width: 280px;
  flex-shrink: 0;
  order: 1;  /* sidebar first visually = RIGHT in RTL flex */
}

@media (max-width: 900px) {
  html[dir="rtl"] .g-main,
  html[dir="ltr"] .g-main {
    flex-direction: column;
  }
  html[dir="rtl"] .ins-main-content,
  html[dir="ltr"] .ins-main-content,
  html[dir="rtl"] .sidebar,
  html[dir="ltr"] .sidebar {
    width: 100%;
    min-width: 0;
    order: unset;
  }
  /* On mobile, sidebar goes below content */
  html[dir="rtl"] .g-main,
  html[dir="ltr"] .g-main {
    flex-direction: column;
  }
  html[dir="rtl"] .ins-main-content { order: 1; }
  html[dir="rtl"] .sidebar          { order: 2; }
  html[dir="ltr"] .ins-main-content { order: 1; }
  html[dir="ltr"] .sidebar          { order: 2; }
}

/* ── NAVIGATION ─────────────────────────────────────────────── */
html[dir="rtl"] .ins-nav { flex-direction: row; }
html[dir="ltr"] .ins-nav { flex-direction: row; }

html[dir="rtl"] .ins-logo-wrap { order: 2; flex-direction: row; }
html[dir="ltr"] .ins-logo-wrap { order: 1; flex-direction: row; }

html[dir="rtl"] .nav-right {
  order: 1;
  flex-direction: row-reverse;
}
html[dir="ltr"] .nav-right {
  order: 2;
  flex-direction: row;
}

html[dir="rtl"] .nav-toggle { order: 0; }
html[dir="ltr"] .nav-toggle { order: 3; }

html[dir="rtl"] #nav-links-ins { text-align: right; }
html[dir="ltr"] #nav-links-ins { text-align: left; }
html[dir="rtl"] #nav-links-ins a { text-align: right; }
html[dir="ltr"] #nav-links-ins a { text-align: left; }

/* ── BREADCRUMB ─────────────────────────────────────────────── */
html[dir="rtl"] .ins-bc { direction: rtl; }
html[dir="ltr"] .ins-bc { direction: ltr; }

/* ── SIDEBAR INTERNALS ──────────────────────────────────────── */
html[dir="rtl"] .sidebar-card,
html[dir="rtl"] .sidebar-card h3,
html[dir="rtl"] .sidebar-card a,
html[dir="rtl"] .sidebar-card p { text-align: right; }

html[dir="ltr"] .sidebar-card,
html[dir="ltr"] .sidebar-card h3,
html[dir="ltr"] .sidebar-card a,
html[dir="ltr"] .sidebar-card p { text-align: left; }

/* Sidebar category list */
html[dir="rtl"] .sidebar-cat-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
/* RTL: الرقم يسار (order:-1)، النص يمين */
html[dir="rtl"] .sidebar-cat-item {
  flex-direction: row !important;
}
html[dir="rtl"] .sidebar-cat-item span:first-child {
  flex: 1; text-align: right; order: 2;
}
html[dir="rtl"] .sidebar-cat-item span:last-child {
  flex-shrink: 0; order: 1;
}
/* LTR: ترتيب طبيعي */
html[dir="ltr"] .sidebar-cat-item {
  flex-direction: row !important;
}
html[dir="ltr"] .sidebar-cat-item span:first-child {
  flex: 1; text-align: left; order: 1;
}
html[dir="ltr"] .sidebar-cat-item span:last-child {
  flex-shrink: 0; order: 2;
}
/* Fix ads sidebar counter position like videos */
html[dir="rtl"] .ads-sidebar .sidebar-cat-item,
html[dir="rtl"] .ads-categories .sidebar-cat-item {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-direction: row !important;
    gap: 10px !important;
}

html[dir="rtl"] .ads-sidebar .sidebar-cat-item span:first-child,
html[dir="rtl"] .ads-categories .sidebar-cat-item span:first-child {
    flex: 1 !important;
    text-align: right !important;
    order: 1 !important;
}

html[dir="rtl"] .ads-sidebar .sidebar-cat-item span:last-child,
html[dir="rtl"] .ads-categories .sidebar-cat-item span:last-child {
    flex-shrink: 0 !important;
    order: 2 !important;
}
/* Tags cloud direction */
html[dir="rtl"] .tags-cloud { direction: rtl; }
html[dir="ltr"] .tags-cloud { direction: ltr; }

/* ── ARTICLE / VIDEO CARDS ──────────────────────────────────── */
html[dir="rtl"] .art-title,
html[dir="rtl"] .art-excerpt,
html[dir="rtl"] .vid-title,
html[dir="rtl"] .vid-desc { text-align: right; direction: rtl; }

html[dir="ltr"] .art-title,
html[dir="ltr"] .art-excerpt,
html[dir="ltr"] .vid-title,
html[dir="ltr"] .vid-desc { text-align: left; direction: ltr; }

html[dir="rtl"] .art-meta { flex-direction: row; justify-content: flex-start; }
html[dir="ltr"] .art-meta { flex-direction: row; justify-content: flex-start; }

html[dir="rtl"] .art-footer { flex-direction: row-reverse; }
html[dir="ltr"] .art-footer { flex-direction: row; }

html[dir="rtl"] .art-tags { flex-direction: row-reverse; }
html[dir="ltr"] .art-tags { flex-direction: row; }

/* ── ARTICLE CONTENT (SINGLE) ───────────────────────────────── */
html[dir="rtl"] .art-content { direction: rtl; text-align: right; }
html[dir="ltr"] .art-content { direction: ltr; text-align: left; }

html[dir="rtl"] .art-content ul,
html[dir="rtl"] .art-content ol { padding-right: 24px; padding-left: 0; }
html[dir="ltr"] .art-content ul,
html[dir="ltr"] .art-content ol { padding-left: 24px; padding-right: 0; }

html[dir="rtl"] .art-content blockquote {
  border-right: 4px solid var(--or, #E05C2A);
  border-left: none;
  border-radius: 0 8px 8px 0;
  padding-right: 20px; padding-left: 14px;
}
html[dir="ltr"] .art-content blockquote {
  border-left: 4px solid var(--or, #E05C2A);
  border-right: none;
  border-radius: 8px 0 0 8px;
  padding-left: 20px; padding-right: 14px;
}

html[dir="rtl"] .art-single-header { text-align: right; direction: rtl; }
html[dir="ltr"] .art-single-header { text-align: left; direction: ltr; }

/* ── STATS GRID (Why Q-Dash) ────────────────────────────────── */
.ins-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  justify-items: center;
}
@media (max-width: 860px) {
  .ins-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .ins-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
.ins-stats-grid .stat-box {
  width: 100%;
  max-width: 220px;
  text-align: center !important;
}
.ins-stats-grid .stat-box i,
.ins-stats-grid .stat-box div { text-align: center !important; }

/* ── CATEGORY PILLS ─────────────────────────────────────────── */
html[dir="rtl"] .cat-nav { flex-direction: row-reverse; justify-content: center; }
html[dir="ltr"] .cat-nav { flex-direction: row; justify-content: center; }

/* ── ADS (SIDEBAR + INLINE) ─────────────────────────────────── */
.ins-ad-card {
  background: var(--cd, #1E1E1E);
  border: 1px solid var(--bd, rgba(224,92,42,0.18));
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 8px;
}
.ins-ad-label {
  font-size: 10px;
  color: var(--tx3, #5E5E5E);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 6px 12px 0;
  text-align: center !important;
}
.ins-ad-image {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}
.ins-ad-image-placeholder {
  width: 100%; aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--dk3,#1A1A1A), var(--cd2,#242424));
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
}
.ins-ad-video-wrap {
  position: relative; padding-bottom: 75%; /* 4:3 */
  height: 0; overflow: hidden;
}
.ins-ad-video-wrap iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:none; }
.ins-ad-body { padding: 14px; }
html[dir="rtl"] .ins-ad-body { text-align: right; }
html[dir="ltr"] .ins-ad-body { text-align: left; }
.ins-ad-title { font-size: 14px; font-weight: 700; margin-bottom: 6px; color: var(--tx,#F5F5F5); }
.ins-ad-desc  { font-size: 12px; color: var(--tx2,#B8B8B8); line-height: 1.6; margin-bottom: 12px; }
.ins-ad-cta {
  display: flex; width: 100%;
  background: var(--or,#E05C2A); color: #fff;
  padding: 9px 14px; border-radius: 9px;
  font-size: 13px; font-weight: 700;
  text-decoration: none; justify-content: center;
  transition: background .2s;
}
.ins-ad-cta:hover { background: var(--or-h,#FF7A47); }

/* Inline ad (between articles) */
.ins-ad-inline {
  grid-column: 1 / -1;  /* full width in grid */
  background: var(--cd);
  border: 1px solid var(--bd);
  border-radius: 16px;
  padding: 20px 24px;
  display: flex; gap: 20px; align-items: center;
  flex-wrap: wrap;
}
html[dir="rtl"] .ins-ad-inline { flex-direction: row-reverse; }
html[dir="ltr"] .ins-ad-inline { flex-direction: row; }
.ins-ad-inline .ins-ad-image {
  width: 120px; height: 90px;
  aspect-ratio: auto;
  flex-shrink: 0; border-radius: 10px;
}
.ins-ad-inline-content { flex: 1; min-width: 0; }
html[dir="rtl"] .ins-ad-inline-content { text-align: right; }
html[dir="ltr"] .ins-ad-inline-content { text-align: left; }
.ins-ad-inline .ins-ad-title { font-size: 15px; }
.ins-ad-inline .ins-ad-cta { width: auto; display: inline-flex; }

/* ── FORMS (SEARCH) ─────────────────────────────────────────── */
html[dir="rtl"] .search-bar { direction: rtl; }
html[dir="ltr"] .search-bar { direction: ltr; }
html[dir="rtl"] .search-bar input { text-align: right; direction: rtl; }
html[dir="ltr"] .search-bar input { text-align: left; direction: ltr; }
html[dir="rtl"] .f-input, html[dir="rtl"] .f-select, html[dir="rtl"] .f-textarea {
  text-align: right; direction: rtl;
}
html[dir="ltr"] .f-input, html[dir="ltr"] .f-select, html[dir="ltr"] .f-textarea {
  text-align: left; direction: ltr;
}

/* ── FAQ ────────────────────────────────────────────────────── */
html[dir="rtl"] .faq-q { text-align: right; flex-direction: row-reverse; }
html[dir="ltr"] .faq-q { text-align: left; flex-direction: row; }
html[dir="rtl"] .faq-a { text-align: right; direction: rtl; }
html[dir="ltr"] .faq-a { text-align: left; direction: ltr; }
html[dir="rtl"] .faq-q .ico { margin-right: auto; margin-left: 0; }
html[dir="ltr"] .faq-q .ico { margin-left: auto; margin-right: 0; }

/* ── FOOTER ─────────────────────────────────────────────────── */
html[dir="rtl"] .ins-footer { direction: rtl; text-align: right; }
html[dir="ltr"] .ins-footer { direction: ltr; text-align: left; }
html[dir="rtl"] .ins-footer h4,
html[dir="rtl"] .ins-footer a,
html[dir="rtl"] .ins-footer p { text-align: right; }
html[dir="ltr"] .ins-footer h4,
html[dir="ltr"] .ins-footer a,
html[dir="ltr"] .ins-footer p { text-align: left; }

/* ── FLOAT WA ───────────────────────────────────────────────── */
html[dir="rtl"] .float-wa { left: 28px; right: auto; }
html[dir="ltr"] .float-wa { right: 28px; left: auto; }

/* ── VIDEO PLAY BUTTON ──────────────────────────────────────── */
html[dir="rtl"] .vid-play,
html[dir="ltr"] .vid-play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
html[dir="rtl"] .vid-card:hover .vid-play,
html[dir="ltr"] .vid-card:hover .vid-play {
  transform: translate(-50%, -50%) scale(1.1);
}
html[dir="rtl"] .vid-shorts-badge { right: 8px; left: auto; }
html[dir="ltr"] .vid-shorts-badge { right: 8px; left: auto; }

/* ── PAGINATION ─────────────────────────────────────────────── */
html[dir="rtl"] .pagination { direction: rtl; }
html[dir="ltr"] .pagination { direction: ltr; }

/* ── MOBILE ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
  html[dir="rtl"] #nav-links-ins { flex-direction: column; align-items: flex-end; }
  html[dir="ltr"] #nav-links-ins { flex-direction: column; align-items: flex-start; }
  html[dir="rtl"] #nav-links-ins a { text-align: right; }
  html[dir="ltr"] #nav-links-ins a { text-align: left; }
  html[dir="rtl"] .float-wa { left: 16px; right: auto; bottom: 16px; }
  html[dir="ltr"] .float-wa { right: 16px; left: auto; bottom: 16px; }
  html[dir="rtl"] .art-single-header { padding-right: 16px; padding-left: 16px; }
  html[dir="ltr"] .art-single-header { padding-left: 16px; padding-right: 16px; }
  .ins-ad-inline { flex-direction: column !important; }
  .ins-ad-inline .ins-ad-image { width: 100%; height: 160px; }
}

/* ── 4-COLUMN CONTENT GRID ──────────────────────────────────── */
.g4-content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1024px) {
  .g4-content { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .g4-content { grid-template-columns: 1fr; }
}
/* Override g3 for content pages */
.ins-content-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1024px) {
  .ins-content-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .ins-content-grid { grid-template-columns: 1fr; }
}
/* Ad card styling */
.ad-card {
  background: var(--cd, #1E1E1E);
  border: 1px solid var(--bd, rgba(224,92,42,0.18));
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all .25s;
  color: var(--tx, #F5F5F5);
  text-decoration: none;
}
.ad-card:hover {
  border-color: var(--bd-h, rgba(224,92,42,0.5));
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(224,92,42,.1);
}
.ad-card .ad-media {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--dk3, #1A1A1A);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 140px;
}
.ad-card .ad-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .3s;
}
.ad-card:hover .ad-media img { transform: scale(1.04); }
.ad-media-emoji { font-size: 40px; line-height: 1; }
.ad-body { padding: 16px; flex: 1; display: flex; flex-direction: column; }
.ad-client { font-size: 11px; color: var(--or,#E05C2A); font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; }
.ad-title { font-size: 14px; font-weight: 800; line-height: 1.4; margin-bottom: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ad-desc  { font-size: 12px; color: var(--tx2,#B8B8B8); line-height: 1.6; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 10px; }
.ad-tags  { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }
.ad-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.ad-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 12px; border-radius: 8px; font-size: 12px;
  font-weight: 700; text-decoration: none; transition: all .2s;
  min-height: 32px;
}
.ad-btn-primary { background: var(--or,#E05C2A); color: #fff; }
.ad-btn-primary:hover { background: var(--or-h,#FF7A47); }
.ad-btn-wa { background: var(--gn,#25D366); color: #fff; }
.ad-btn-wa:hover { background: #1EBE58; }
.ad-btn-ol { background: transparent; color: var(--tx2,#ABABAB);
  border: 1px solid var(--bd,rgba(224,92,42,0.18)); }
.ad-btn-ol:hover { border-color: var(--or,#E05C2A); color: var(--or,#E05C2A); }
/* Sidebar mini-ad */
.ins-ad-sidebar {
  background: var(--cd);
  border: 1px solid rgba(224,92,42,.25);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 16px;
}
.ins-ad-sidebar .ad-media { min-height: 110px; aspect-ratio: 4/3; }
.ins-ad-sidebar .ad-body { padding: 12px; }
.ins-ad-sidebar .ad-title { font-size: 13px; }
html[dir='rtl'] .ad-body, html[dir='rtl'] .ad-client,
html[dir='rtl'] .ad-title, html[dir='rtl'] .ad-desc { text-align: right; }
html[dir='ltr'] .ad-body, html[dir='ltr'] .ad-client,
html[dir='ltr'] .ad-title, html[dir='ltr'] .ad-desc { text-align: left; }
html[dir='rtl'] .ad-links, html[dir='rtl'] .ad-tags { flex-direction: row-reverse; }
html[dir='ltr'] .ad-links, html[dir='ltr'] .ad-tags { flex-direction: row; }
/* Pagination improvement */
.pagination { display: flex; justify-content: center; gap: 6px; margin-top: 36px; flex-wrap: wrap; }
.pg-btn { min-width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  background: var(--cd); border: 1px solid var(--bd); border-radius: 8px;
  font-size: 13px; font-weight: 600; color: var(--tx2); transition: all .2s;
  text-decoration: none; padding: 0 10px; }
.pg-btn:hover, .pg-btn.active { background: var(--or); color: #fff; border-color: var(--or); }
.pg-btn.disabled { opacity: .4; pointer-events: none; }

/* =====================================================
   ULTRA FINAL FIX — Ads sidebar categories RTL
   Required result: count badge INSIDE FAR LEFT, title FAR RIGHT.
   This overrides old .sidebar-cat-item span rules and inline styles.
   ===================================================== */
html[dir="rtl"] .ads-categories a.sidebar-cat-item.ads-cat-item,
html[dir="rtl"] .ads-sidebar a.sidebar-cat-item.ads-cat-item{
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
  padding: 9px 48px 9px 8px !important; /* right text area + left badge space */
  border-bottom: 1px solid var(--bd) !important;
  text-align: right !important;
  direction: rtl !important;
  overflow: hidden !important;
  background: transparent !important;
}

html[dir="rtl"] .ads-categories a.sidebar-cat-item.ads-cat-item > span.cat-title,
html[dir="rtl"] .ads-sidebar a.sidebar-cat-item.ads-cat-item > span.cat-title{
  position: static !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: right !important;
  direction: rtl !important;
  white-space: normal !important;
  word-break: normal !important;
  line-height: 1.55 !important;
  background: transparent !important;
  transform: none !important;
  float: none !important;
  flex: none !important;
  order: initial !important;
}

html[dir="rtl"] .ads-categories a.sidebar-cat-item.ads-cat-item > span.cat-count,
html[dir="rtl"] .ads-sidebar a.sidebar-cat-item.ads-cat-item > span.cat-count{
  position: absolute !important;
  left: 8px !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 26px !important;
  min-width: 26px !important;
  max-width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(224,92,42,.12) !important;
  color: var(--or) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-align: center !important;
  line-height: 1 !important;
  float: none !important;
  flex: none !important;
  order: initial !important;
}
/* Fix article/video cards overflow */
.ins-main-content{
  min-width: 0 !important;
  overflow: hidden !important;
}

.ins-content-grid,
.g3,
.g4{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
  width: 100% !important;
  overflow: visible !important;
}

.art-card,
.vid-card,
.ins-ad-card{
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

@media (max-width: 1100px){
  .ins-content-grid,
  .g3,
  .g4{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px){
  .ins-content-grid,
  .g3,
  .g4{
    grid-template-columns: 1fr !important;
  }
}