.content-layout{
  --sb-width:300px;
  --sb-gray-bg:#f3f1ec;
  --sb-gray-line:#d5d3cd;
  --sb-gray-text:#9a9994;

  max-width:1160px !important;
  margin:0 auto !important;
  padding:24px 20px !important;
  background:#ffffff !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:flex-start !important;
  gap:24px !important;
  border-radius:0;
}
html.dark-mode .content-layout{
  --sb-gray-bg:#2b2c31;
  --sb-gray-line:#3c3d42;
  --sb-gray-text:#7c7b76;
  background:#1b1c20 !important;
}

.main-content{
  flex:1 !important;
  min-width:0 !important;
}

.sidebar{
  flex:0 0 var(--sb-width) !important;
  width:var(--sb-width) !important;
  min-width:var(--sb-width) !important;
  position:sticky;
  top:20px;
  display:flex !important;
  flex-direction:column !important;
  gap:20px;
}

.ad-unit{
  width:100%;
}
.ad-unit-label{
  font-size:10px;
  font-weight:700;
  letter-spacing:0.6px;
  text-transform:uppercase;
  color:var(--sb-gray-text);
  text-align:center;
  margin:0 0 6px;
}
.ad-slot{
  width:100%;
  background:var(--sb-gray-bg);
  border:1px dashed var(--sb-gray-line);
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--sb-gray-text);
  font-size:12px;
  font-weight:600;
}
.ad-slot-300x250{ height:250px; }
.ad-slot-300x600{ height:600px; }
.ad-slot-300x100{ height:100px; }

@media (max-width:768px){
  .content-layout{flex-direction:column !important; padding:16px !important;}
  .sidebar{
    width:100% !important;
    min-width:unset !important;
    max-width:var(--sb-width);
    margin:0 auto;
    position:static;
  }
}

@media (max-width:400px){
  .content-layout{padding:12px !important; gap:16px !important;}
  .sidebar{max-width:100%;}
  .ad-slot-300x600{height:400px;}
}