/*
 * Mini previews of the design styles (admin style cards and the front-end demo switcher).
 * One .news-mock--<style> block per design style.
 */
.news-mock{border-radius:4px;overflow:hidden;border:1px solid #e0e0e0;background:#f3f1ec;aspect-ratio:16/10;display:flex;flex-direction:column}
.news-mock__bar{height:16%;background:#333;display:flex;align-items:center;gap:6px;padding:0 8px}
.news-mock__logo{width:22%;height:36%;background:#d7141b;border-radius:2px}
.news-mock__nav{flex:1;height:14%;background:repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 12%,transparent 12% 16%)}
.news-mock__main{flex:1;display:grid;grid-template-columns:1.6fr 1fr;gap:6px;padding:8px}
.news-mock__hero{background:#b9b3a8;border-radius:5px;position:relative}
.news-mock__hero::after{content:"";position:absolute;left:8%;right:20%;bottom:10%;height:14%;background:#fff;border-radius:2px;box-shadow:0 -9px 0 -2px rgba(255,255,255,.7)}
.news-mock__side{display:grid;gap:5px}
.news-mock__side i{background:#fff;border-radius:5px;border-left:3px solid #d7141b}
.news-mock--magazine{background:#fff}
.news-mock--magazine .news-mock__bar{background:#fff;border-bottom:1px solid #111;justify-content:center;flex-direction:column;gap:3px;height:22%}
.news-mock--magazine .news-mock__logo{background:#111;width:30%;height:26%;border-radius:0}
.news-mock--magazine .news-mock__nav{flex:0 0 5%;width:70%;background:repeating-linear-gradient(90deg,#111 0 10%,transparent 10% 15%)}
.news-mock--magazine .news-mock__main{gap:10px;padding:12px}
.news-mock--magazine .news-mock__hero{border-radius:0;background:#cbb8a6}
.news-mock--magazine .news-mock__hero::after{background:#111;height:10%;right:35%;box-shadow:none}
.news-mock--magazine .news-mock__side i{border-radius:0;border-left:0;border-top:2px solid #9a3412;background:#faf9f6}
.news-mock--business{background:#fff}
.news-mock--business .news-mock__bar{background:#fff;border-bottom:1px solid #e3e8e8;box-shadow:0 5px 0 #f6f8f8,0 6px 0 #e3e8e8}
.news-mock--business .news-mock__logo{background:#0f1b24;width:16%;border-radius:1px}
.news-mock--business .news-mock__nav{background:repeating-linear-gradient(90deg,#0f1b24 0 8%,transparent 8% 12%);height:10%;opacity:.7}
.news-mock--business .news-mock__main{grid-template-columns:2fr 1fr;padding:14px 8px 8px}
.news-mock--business .news-mock__hero{background:#51646e;border-radius:2px}
.news-mock--business .news-mock__hero::after{background:#fff;border-left:3px solid #0a7f74;box-shadow:none;border-radius:0;height:10%;right:40%}
.news-mock--business .news-mock__side i{border-left:0;border-radius:2px;background:#f6f8f8;border-top:1px solid #e3e8e8}
.news-mock--tech{background:#0a0c11}
.news-mock--tech .news-mock__bar{background:#0a0c11;border-bottom:1px solid #1f2430}
.news-mock--tech .news-mock__logo{background:#3d6bf0;width:14%;border-radius:4px}
.news-mock--tech .news-mock__nav{background:repeating-linear-gradient(90deg,#c9ced9 0 7%,transparent 7% 11%);height:9%;opacity:.8}
.news-mock--tech .news-mock__main{grid-template-columns:1fr 1fr;gap:5px;padding:8px}
.news-mock--tech .news-mock__hero{background:#1b2233;border-radius:7px;border:1px solid #2b3550}
.news-mock--tech .news-mock__hero::after{background:#e9ecf3;height:9%;box-shadow:0 -7px 0 -2px #3d6bf0}
.news-mock--tech .news-mock__side{grid-template-columns:1fr 1fr}
.news-mock--tech .news-mock__side i{background:#11141b;border:1px solid #1f2430;border-radius:7px}
.news-mock--tech .news-mock__side i:last-child{grid-column:1/-1;box-shadow:0 0 0 1px #3d6bf066}
.news-mock--lifestyle{background:#fff}
.news-mock--lifestyle .news-mock__bar{background:#fff;flex-direction:column;justify-content:center;gap:4px;height:24%;border-bottom:1px solid #ece6e0}
.news-mock--lifestyle .news-mock__logo{background:#1b1718;width:34%;height:30%;border-radius:0}
.news-mock--lifestyle .news-mock__nav{flex:0 0 4%;width:56%;background:repeating-linear-gradient(90deg,#7a7071 0 9%,transparent 9% 15%)}
.news-mock--lifestyle .news-mock__main{grid-template-columns:1fr;grid-template-rows:1.4fr 1fr;padding:10px 18px;gap:8px}
.news-mock--lifestyle .news-mock__hero{background:#d9c7bd;border-radius:0}
.news-mock--lifestyle .news-mock__hero::after{display:none}
.news-mock--lifestyle .news-mock__side{grid-template-columns:repeat(3,1fr);gap:8px}
.news-mock--lifestyle .news-mock__side i{background:#efe6e0;border:0;border-radius:0}
.news-mock--sport{background:#fff}
.news-mock--sport .news-mock__bar{background:#0c0f0e;box-shadow:0 7px 0 #007f39}
.news-mock--sport .news-mock__logo{background:#007f39;width:15%;transform:skew(-12deg)}
.news-mock--sport .news-mock__nav{background:repeating-linear-gradient(90deg,#fff 0 8%,transparent 8% 12%);height:14%;transform:skew(-12deg)}
.news-mock--sport .news-mock__main{grid-template-columns:2fr 1fr;gap:3px;padding:14px 6px 6px}
.news-mock--sport .news-mock__hero{background:#2f5e3c;border-radius:0}
.news-mock--sport .news-mock__hero::after{background:#fff;height:16%;right:30%;transform:skew(-12deg);box-shadow:none}
.news-mock--sport .news-mock__side{gap:3px}
.news-mock--sport .news-mock__side i{background:#3c4a42;border:0;border-radius:0}
.news-mock--local{background:#fff}
.news-mock--local .news-mock__bar{background:#fff;border-bottom:1px solid #e3e8ef}
.news-mock--local .news-mock__logo{background:#1e5aa8;width:16%;border-radius:4px}
.news-mock--local .news-mock__nav{background:repeating-linear-gradient(90deg,#152033 0 8%,transparent 8% 12%);height:10%;opacity:.7}
.news-mock--local .news-mock__main{grid-template-columns:1.8fr 1fr;padding:10px 8px 8px}
.news-mock--local .news-mock__hero{background:#9fb6d3;border-radius:7px}
.news-mock--local .news-mock__hero::after{background:#152033;left:0;right:20%;bottom:-14%;height:9%;box-shadow:none}
.news-mock--local .news-mock__side i{border-left:0;border-radius:7px;background:#f4f7fb;border:1px solid #e3e8ef}
.news-mock--local .news-mock__side i:last-child{background:#e8eef7;border-color:#e8eef7}
.news-mock--longread{background:#fbf8f1}
.news-mock--longread .news-mock__bar{background:#fbf8f1;flex-direction:column;justify-content:center;gap:3px;height:22%;border-bottom:3px double #e4dccb}
.news-mock--longread .news-mock__logo{background:#1d1a16;width:30%;height:26%;border-radius:0}
.news-mock--longread .news-mock__nav{flex:0 0 4%;width:60%;background:repeating-linear-gradient(90deg,#6a6256 0 10%,transparent 10% 15%)}
.news-mock--longread .news-mock__main{grid-template-columns:1.3fr 1fr;padding:12px 14px}
.news-mock--longread .news-mock__hero{background:transparent;border-radius:0;box-shadow:inset 0 9px 0 -2px #1d1a16,inset 0 22px 0 -11px #fbf8f1,inset 0 30px 0 -16px #1d1a16,inset 0 44px 0 -26px #fbf8f1,inset 0 50px 0 -31px #8b1e1e}
.news-mock--longread .news-mock__hero::after{display:none}
.news-mock--longread .news-mock__side{grid-template-columns:1fr}
.news-mock--longread .news-mock__side i{background:#cfc3ad;border:0;border-radius:0}
.news-mock--longread .news-mock__side i:not(:first-child){display:none}
.news-mock--video{background:#0f0f10}
.news-mock--video .news-mock__bar{background:#0f0f10;border-bottom:1px solid #26262a}
.news-mock--video .news-mock__logo{background:#cc1f26;width:14%;border-radius:4px}
.news-mock--video .news-mock__nav{background:repeating-linear-gradient(90deg,#f1f1f2 0 8%,transparent 8% 12%);height:9%;opacity:.8}
.news-mock--video .news-mock__main{grid-template-columns:2fr 1fr;padding:8px}
.news-mock--video .news-mock__hero{background:#2a2a2e radial-gradient(circle at 50% 50%,#fff 0 7%,transparent 7.5%);border-radius:7px}
.news-mock--video .news-mock__hero::after{background:#f1f1f2;left:0;bottom:-16%;height:8%;box-shadow:none}
.news-mock--video .news-mock__side i{background:#1a1a1c;border:0;border-radius:6px;box-shadow:inset 26px 0 0 #3a3a3e}
.news-mock--crypto{background:#090b10}
.news-mock--crypto .news-mock__bar{background:#090b10;border-bottom:1px solid #1d2230;box-shadow:0 6px 0 #10131b}
.news-mock--crypto .news-mock__logo{background:#7c3aed;width:14%;border-radius:4px;box-shadow:0 0 8px #7c3aed}
.news-mock--crypto .news-mock__nav{background:repeating-linear-gradient(90deg,#e8ebf2 0 7%,transparent 7% 11%);height:9%;opacity:.8}
.news-mock--crypto .news-mock__main{grid-template-columns:1.7fr 1fr;padding:12px 8px 8px}
.news-mock--crypto .news-mock__hero{background:#1c2133;border-radius:8px}
.news-mock--crypto .news-mock__hero::after{background:#e8ebf2;box-shadow:none;height:10%}
.news-mock--crypto .news-mock__side i{background:#10131b linear-gradient(135deg,transparent 45%,#16c784 47% 50%,transparent 52%);border:1px solid #1d2230;border-radius:6px}
.news-mock--crypto .news-mock__side i:nth-child(2){background:#10131b linear-gradient(45deg,transparent 45%,#ea3943 47% 50%,transparent 52%)}
.news-mock--pop{background:#fff}
.news-mock--pop .news-mock__bar{background:#0e0e10}
.news-mock--pop .news-mock__logo{background:#e0156f;width:16%;height:44%;border-radius:3px;transform:skew(-8deg)}
.news-mock--pop .news-mock__nav{background:repeating-linear-gradient(90deg,#fff 0 9%,transparent 9% 13%);height:12%}
.news-mock--pop .news-mock__main{grid-template-columns:1.6fr 1fr;padding:22px 8px 8px;position:relative}
.news-mock--pop .news-mock__main::before{content:"";position:absolute;left:8px;top:5px;width:60%;height:12px;background:radial-gradient(circle at 6px 6px,#e0156f 5px,transparent 5.5px) 0 0/16px 12px repeat-x}
.news-mock--pop .news-mock__hero{background:#6b3fa0;border-radius:8px}
.news-mock--pop .news-mock__hero::after{background:#ffe45c;height:18%;box-shadow:none;border-radius:0}
.news-mock--pop .news-mock__side i{border-left:0;background:#fff0f6;border-radius:6px;box-shadow:inset 18px 0 0 #e0156f}
.news-mock--clean{background:#fff}
.news-mock--clean .news-mock__bar{background:#fff;border-bottom:1px solid #e6e6e6;justify-content:space-between}
.news-mock--clean .news-mock__logo{background:#e0261b;width:14%;border-radius:2px}
.news-mock--clean .news-mock__nav{flex:0 0 52%;height:9%;background:repeating-linear-gradient(90deg,#111 0 11%,transparent 11% 16%);opacity:.8}
.news-mock--clean .news-mock__main{grid-template-columns:1.9fr 1fr;gap:10px;padding:10px 9px}
.news-mock--clean .news-mock__hero{background:#cfd3d6;border-radius:3px}
.news-mock--clean .news-mock__hero::after{background:#111;left:0;right:30%;bottom:-2%;height:9%;box-shadow:0 -7px 0 -2px #bbb}
.news-mock--clean .news-mock__side{gap:7px;padding-left:9px;background:radial-gradient(circle,#111 1.2px,transparent 1.5px) 1px 0/4px 5px repeat-y}
.news-mock--clean .news-mock__side i{background:linear-gradient(#999,#999) 0 30%/40% 2px no-repeat,linear-gradient(#111,#111) 0 70%/90% 3px no-repeat;border:0;border-radius:0;position:relative}
.news-mock--clean .news-mock__side i::before{content:"";position:absolute;left:-10px;top:25%;width:5px;height:5px;border-radius:50%;background:#111}
.news-mock--clean .news-mock__side i:first-child::before{background:#e0261b}