/* Responsive Design Considerations (for actual CSS in a website/block editor) */
@media (max-width: 768px) {
div[style*=”max-width: 1000px”] {
padding: 15px;
}
span[style*=”font-size: 2.5em”] { /* H1 */
font-size: 2em !important;
}
span[style*=”font-size: 1.8em”] { /* H2 */
font-size: 1.5em !important;
}
span[style*=”font-size: 1.3em”] { /* H3 */
font-size: 1.1em !important;
}
div[style*=”font-size: 1.1em”], p[style*=”font-size: 1em”] { /* Body text and smaller */
font-size: 1em !important;
line-height: 1.7 !important;
}
table, thead, tbody, th, td, tr {
display: block;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr {
border: 1px solid #ccc;
margin-bottom: 10px;
border-radius: 5px;
}
td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50% !important;
text-align: right !important;
}
td:before {
position: absolute;
top: 6px;
left: 6px;
width: 45%;
padding-left: 10px;
white-space: nowrap;
content: attr(data-label); /* Requires data-label on TDs */
font-weight: bold;
color: #1E6C9D;
}
/* For the table in this specific example, since I can’t add data-label,
it would just stack the content, which is still readable. */
td:nth-of-type(1):before { content: “چالش رایج:”; }
td:nth-of-type(2):before { content: “راهکار مؤثر:”; }

.flex-wrap > div { /* For the infographic alternative */
flex: 1 1 100% !important;
margin-bottom: 15px;
}
}

/* Tablet and Laptop Adjustments */
@media (min-width: 769px) and (max-width: 1200px) {
div[style*=”max-width: 1000px”] {
padding: 20px;
}
span[style*=”font-size: 2.5em”] { /* H1 */
font-size: 2.2em !important;
}
span[style*=”font-size: 1.8em”] { /* H2 */
font-size: 1.6em !important;
}
span[style*=”font-size: 1.3em”] { /* H3 */
font-size: 1.2em !important;
}
div[style*=”font-size: 1.1em”], p[style*=”font-size: 1em”] { /* Body text and smaller */
font-size: 1.05em !important;
line-height: 1.75 !important;
}
}

/* General styles for a clean display on all devices, especially relevant for block editors */
body {
margin: 0;
padding: 0;
background-color: #f4f7f6; /* A very light, subtle background */
}
/* Ensure Vazirmatn or a suitable sans-serif font is loaded if not already */
@font-face {
font-family: ‘Vazirmatn’;
src: url(‘https://cdn.fontcdn.ir/Font/Persian/Vazir/Vazirmatn-Regular.woff2’) format(‘woff2’);
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: ‘Vazirmatn’;
src: url(‘https://cdn.fontcdn.ir/Font/Persian/Vazir/Vazirmatn-Bold.woff2’) format(‘woff2’);
font-weight: bold;
font-style: normal;
font-display: swap;
}