@charset "UTF-8";
@font-face {
    font-family: 'SakolenterBlog';
    src: url('../fonts/blog-reference-v1/blog-regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'SakolenterBlog';
    src: url('../fonts/blog-reference-v1/blog-bold.woff') format('woff');
    font-weight: 600 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'SakolenterBlog';
    src: url('../fonts/blog-reference-v1/blog-extrabold.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
.html-blog-reference body,
.html-blog-reference .page-wrapper { background: #f8f9fb; }
.html-blog-reference .sc-blog-shell { display: flow-root; width: 100%; max-width: none; margin: 0; padding: 0; }
#sakolenter-blog-reference {
    --sc-blog-red: #f5223d;
    --sc-blog-muted: #7e899e;
    --sc-blog-border: #e3e8ef;
    --sc-blog-gutter: 26px;
    --sc-blog-hero-height: max(190px, calc((100vw - var(--sc-blog-gutter) - var(--sc-blog-gutter)) * .154213));
    width: calc(100% - var(--sc-blog-gutter) - var(--sc-blog-gutter));
    max-width: none;
    margin: 0 auto 12px;
    padding: 0;
    color: #161a20;
    font-family: 'SakolenterBlog', estedad, Tahoma, sans-serif;
    font-size: 14px;
    line-height: 1.8;
    text-align: right;
}
#sakolenter-blog-reference *,
#sakolenter-blog-reference *::before,
#sakolenter-blog-reference *::after { box-sizing: border-box; }
#sakolenter-blog-reference :is(h1, h2, h3, p, figure) { margin: 0; padding: 0; font-family: inherit; }
#sakolenter-blog-reference a { text-decoration: none; }
#sakolenter-blog-reference button,
#sakolenter-blog-reference input { font-family: inherit; }
#sakolenter-blog-reference a:focus-visible,
#sakolenter-blog-reference button:focus-visible { outline: 2px solid var(--sc-blog-red); outline-offset: 3px; }
#sakolenter-blog-reference .sc-blog-icon { display: block; flex: 0 0 auto; width: 22px; height: 22px; margin: 0; padding: 0; color: inherit; }
#sakolenter-blog-reference .sc-blog-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 59.45946% minmax(0, 1fr);
    align-items: center;
    min-height: var(--sc-blog-hero-height);
    width: 100%;
    margin: 0;
    padding: 24px 179px 24px 0;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(115deg, #10171b, #171b20);
    color: #fff;
    direction: ltr;
}
#sakolenter-blog-reference .sc-blog-hero__visual { position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; width: 59.45946%; overflow: hidden; }
/* The WebP is a format conversion of the approved 1310 x 1201 reference.
   This 748 x 194 window contains photography and the diagonal red band only.
   All visible headings and icons are live HTML/SVG. */
#sakolenter-blog-reference .sc-blog-hero__visual::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: max(100%, calc(var(--sc-blog-hero-height) * 3.8556701));
    aspect-ratio: 748 / 194;
    transform: translateY(-50%);
    background-image: url('../img/blog-reference-v1/blog-hero-source.webp');
    background-size: 175.1336898% 619.0721649%;
    background-position: 4.6263345% 11.7189672%;
    background-repeat: no-repeat;
}
#sakolenter-blog-reference .sc-blog-hero__copy { grid-column: 2; min-width: 0; position: relative; z-index: 1; direction: rtl; text-align: right; }
#sakolenter-blog-reference .sc-blog-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 12px; margin: 0 0 13px; color: #d1d5dc; font-size: 11px; line-height: 1.9; }
#sakolenter-blog-reference .sc-blog-breadcrumb a { color: inherit; }
#sakolenter-blog-reference .sc-blog-breadcrumb a:hover { color: #fff; text-decoration: underline; }
#sakolenter-blog-reference .sc-blog-breadcrumb > span[aria-hidden] { color: #8a9098; }
#sakolenter-blog-reference .sc-blog-hero h1 { color: #fff; font-size: clamp(27px, 3.05vw, 44px); font-weight: 900; line-height: 1.55; white-space: nowrap; }
#sakolenter-blog-reference .sc-blog-hero p { margin-top: 3px; color: #fff; font-size: clamp(13px, 1.4vw, 19px); line-height: 1.9; }
#sakolenter-blog-reference .sc-blog-hero__icon { position: absolute; z-index: 1; top: 50%; right: 27px; display: flex; align-items: center; justify-content: center; width: 124px; height: 124px; transform: translateY(-50%); border: 2px solid rgba(245,34,61,.13); border-radius: 50%; background: radial-gradient(circle, rgba(173,13,38,.3), rgba(94,12,28,.2)); color: #fff; }
#sakolenter-blog-reference .sc-blog-hero__icon .sc-blog-icon { width: 62px; height: 62px; stroke-width: 1.35; }

#sakolenter-blog-reference .sc-blog-layout { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr); align-items: start; gap: 14px; margin-top: 16px; direction: ltr; }
#sakolenter-blog-reference .sc-blog-main,
#sakolenter-blog-reference .sc-blog-sidebar { min-width: 0; direction: rtl; }
#sakolenter-blog-reference .sc-blog-sidebar { display: grid; gap: 18px; }
#sakolenter-blog-reference .sc-blog-panel { display: block; min-width: 0; margin: 0; padding: 16px; border: 1px solid var(--sc-blog-border); border-radius: 12px; background: #fff; box-shadow: 0 4px 20px rgba(32,43,64,.022); }
#sakolenter-blog-reference .sc-blog-main-panel { padding: 12px 14px 13px; }
#sakolenter-blog-reference .sc-blog-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; min-height: 74px; padding: 0 13px 14px 0; }
#sakolenter-blog-reference .sc-blog-toolbar > div { min-width: 0; }
#sakolenter-blog-reference .sc-blog-toolbar h2 { color: #10151b; font-size: clamp(21px, 1.9vw, 28px); font-weight: 900; line-height: 1.6; overflow-wrap: anywhere; }
#sakolenter-blog-reference .sc-blog-toolbar p { color: var(--sc-blog-muted); font-size: 14px; line-height: 1.9; }
#sakolenter-blog-reference .sc-blog-rss { display: inline-flex; flex: 0 0 38px; width: 38px; height: 38px; align-items: center; justify-content: center; margin: 2px 0 0; border: 1px solid #d8e0ec; border-radius: 8px; color: var(--sc-blog-red); background: #fff; }
#sakolenter-blog-reference .sc-blog-rss .sc-blog-icon { width: 20px; height: 20px; }
#sakolenter-blog-reference .sc-blog-rss:hover { border-color: #f3a4ae; background: #fff5f7; }
#sakolenter-blog-reference .sc-blog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 16px 18px; margin: 0; }
#sakolenter-blog-reference .sc-blog-article { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 5px 5px 0; overflow: hidden; border: 1px solid var(--sc-blog-border); border-radius: 9px; background: #fff; }
#sakolenter-blog-reference .sc-blog-article__image { display: block; flex: 0 0 auto; width: 100%; min-width: 0; aspect-ratio: 2.18; overflow: hidden; border-radius: 6px; background: #f1f3f6; }
#sakolenter-blog-reference .sc-blog-article__image img { display: block; width: 100%; height: 100%; max-width: 100%; margin: 0; border: 0; object-fit: cover; object-position: center; transition: transform .25s ease; }
#sakolenter-blog-reference .sc-blog-article:hover .sc-blog-article__image img { transform: scale(1.025); }
#sakolenter-blog-reference .sc-blog-article__body { flex: 1 1 auto; min-width: 0; padding: 9px 9px 8px; }
#sakolenter-blog-reference .sc-blog-article__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; margin: 0 0 5px; color: var(--sc-blog-muted); font-size: 11px; line-height: 1.8; }
#sakolenter-blog-reference .sc-blog-article__meta > span { display: inline-flex; align-items: center; gap: 7px; }
#sakolenter-blog-reference .sc-blog-article__meta .sc-blog-icon { width: 17px; height: 17px; stroke-width: 1.35; }
#sakolenter-blog-reference .sc-blog-article__meta time { flex: 0 0 auto; direction: ltr; white-space: nowrap; font-size: 10px; }
#sakolenter-blog-reference .sc-blog-article h3 { color: #11151c; font-size: 16px; font-weight: 900; line-height: 1.65; }
#sakolenter-blog-reference .sc-blog-article h3 a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-height: 3.3em; overflow: hidden; color: inherit; overflow-wrap: anywhere; }
#sakolenter-blog-reference .sc-blog-article h3 a:hover { color: var(--sc-blog-red); }
#sakolenter-blog-reference .sc-blog-article__excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-height: 3.7em; margin-top: 4px; overflow: hidden; color: var(--sc-blog-muted); font-size: 13px; line-height: 1.85; overflow-wrap: anywhere; }
#sakolenter-blog-reference .sc-blog-article__footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 42px; margin: 0 8px; padding: 5px 0; border-top: 1px solid #e7ebf1; }
#sakolenter-blog-reference .sc-blog-read { display: inline-flex; align-items: center; gap: 16px; min-height: 30px; color: var(--sc-blog-red); font-size: 13px; font-weight: 700; }
#sakolenter-blog-reference .sc-blog-read .sc-blog-icon { width: 19px; height: 19px; }
#sakolenter-blog-reference .sc-blog-read:hover { color: #dd1730; }
#sakolenter-blog-reference .sc-blog-share { display: inline-flex; flex: 0 0 32px; align-items: center; justify-content: center; width: 32px; height: 30px; margin: 0; padding: 5px; border: 0; border-radius: 6px; background: transparent; color: #8792a5; cursor: pointer; box-shadow: none; }
#sakolenter-blog-reference .sc-blog-share .sc-blog-icon { width: 18px; height: 18px; }
#sakolenter-blog-reference .sc-blog-share:hover { color: var(--sc-blog-red); background: #fff2f4; }

#sakolenter-blog-reference .sc-blog-side-heading { display: flex; align-items: center; justify-content: flex-start; gap: 12px; min-width: 0; }
#sakolenter-blog-reference .sc-blog-side-heading h2 { min-width: 0; color: #11151b; font-size: 18px; font-weight: 900; line-height: 1.8; overflow-wrap: anywhere; }
#sakolenter-blog-reference .sc-blog-icon-badge { display: flex; flex: 0 0 60px; width: 60px; height: 60px; align-items: center; justify-content: center; border-radius: 50%; background: #ffe9ee; color: var(--sc-blog-red); }
#sakolenter-blog-reference .sc-blog-icon-badge .sc-blog-icon { width: 30px; height: 30px; stroke-width: 1.7; }
#sakolenter-blog-reference .sc-blog-search > p { margin: -5px 72px 16px 0; color: var(--sc-blog-muted); font-size: 13px; line-height: 1.9; }
/* Keep the plugin form, its action, hidden values and submitted field names. */
#sakolenter-blog-reference .sc-blog-search-native { position: relative; width: 100%; min-width: 0; min-height: 48px; }
#sakolenter-blog-reference .sc-blog-search-native :is(form, .search-box, .search-box-text, .search-box-button, .form-group, .form-wrap, .inputs) { width: 100%; min-width: 0; margin: 0; padding: 0; }
#sakolenter-blog-reference .sc-blog-search-native form { position: relative; border: 0; background: transparent; }
#sakolenter-blog-reference .sc-blog-search-native :is(h1, h2, h3, h4, .title, label) { display: none; }
#sakolenter-blog-reference .sc-blog-search-native input[type="text"],
#sakolenter-blog-reference .sc-blog-search-native input[type="search"] { display: block; width: 100%; min-width: 0; height: 48px; margin: 0; padding: 10px 68px 10px 14px; border: 1px solid #dfe5ed; border-radius: 8px; background: linear-gradient(180deg, #fcfdff, #fafbfd); color: #252b36; font-family: inherit; font-size: 12px; line-height: 1.9; text-align: right; direction: rtl; outline: none; box-shadow: none; }
#sakolenter-blog-reference .sc-blog-search-native input::placeholder { color: #929cb0; opacity: 1; }
#sakolenter-blog-reference .sc-blog-search-native input:focus { border-color: #ef8795; box-shadow: 0 0 0 3px rgba(245,34,61,.08); }
#sakolenter-blog-reference .sc-blog-search-native :is(input[type="submit"], button[type="submit"], button:not([type])) { position: absolute; top: 0; right: 0; display: block; width: 55px; min-width: 55px; height: 48px; min-height: 48px; margin: 0; padding: 0; border: 1px solid var(--sc-blog-red); border-radius: 8px; background: var(--sc-blog-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='7' fill='none' stroke='white' stroke-width='2'/%3E%3Cpath d='m16 16 5 5' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 22px 22px no-repeat; color: #fff; font-size: 0; line-height: 0; cursor: pointer; box-shadow: none; }
#sakolenter-blog-reference .sc-blog-search-native button > * { visibility: hidden; }
#sakolenter-blog-reference .sc-blog-search-native :is(input[type="submit"], button[type="submit"], button:not([type])):hover { background-color: #e61b36; border-color: #e61b36; }
#sakolenter-blog-reference .sc-blog-recent-list { margin-top: 12px; padding: 0 7px; border: 1px solid #e3e8ef; border-radius: 9px; }
#sakolenter-blog-reference .sc-blog-recent-link { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; min-height: 84px; margin: 0; padding: 8px 0; border-bottom: 1px solid #e7ebf1; color: #10141c; }
#sakolenter-blog-reference .sc-blog-recent-link:last-child { border-bottom: 0; }
#sakolenter-blog-reference .sc-blog-recent-link img { display: block; flex: 0 0 82px; width: 82px; height: 62px; max-width: 82px; border: 0; border-radius: 7px; background: #f1f3f6; object-fit: cover; }
#sakolenter-blog-reference .sc-blog-recent-link > span { display: block; min-width: 0; flex: 1 1 auto; }
#sakolenter-blog-reference .sc-blog-recent-link strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-height: 3.5em; overflow: hidden; color: inherit; font-size: 14px; font-weight: 900; line-height: 1.75; overflow-wrap: anywhere; }
#sakolenter-blog-reference .sc-blog-recent-link small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-height: 3.6em; margin-top: 3px; overflow: hidden; color: var(--sc-blog-muted); font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
#sakolenter-blog-reference .sc-blog-recent-link:hover strong { color: var(--sc-blog-red); }
#sakolenter-blog-reference .sc-blog-support { background: linear-gradient(125deg, #fff4f6, #fff8fa); }
#sakolenter-blog-reference .sc-blog-support .sc-blog-side-heading { gap: 10px; }
#sakolenter-blog-reference .sc-blog-support .sc-blog-side-heading h2 { font-size: 15px; line-height: 1.9; }
#sakolenter-blog-reference .sc-blog-support > p { margin: 3px 0 16px; color: var(--sc-blog-muted); font-size: 12px; line-height: 1.9; text-align: center; }
#sakolenter-blog-reference .sc-blog-button { display: inline-flex; width: 100%; min-height: 48px; align-items: center; justify-content: center; gap: 10px; margin: 0; padding: 9px 14px; border: 1px solid var(--sc-blog-red); border-radius: 8px; background: linear-gradient(120deg, #fa1838, #f5223d); color: #fff; font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1.9; text-align: center; cursor: pointer; }
#sakolenter-blog-reference .sc-blog-button:hover { color: #fff; background: #e61b36; }
#sakolenter-blog-reference .sc-blog-button--outline { background: #fff; color: var(--sc-blog-red); }
#sakolenter-blog-reference .sc-blog-button--outline:hover { background: #fff0f3; color: #dd1730; }

#sakolenter-blog-reference .sc-blog-paging { display: flex; justify-content: center; width: 100%; margin: 0; padding: 0; direction: rtl; }
#sakolenter-blog-reference .sc-blog-paging ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; width: auto; max-width: 100%; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; list-style: none; direction: rtl; }
#sakolenter-blog-reference .sc-blog-paging ul > li { display: block; flex: 0 0 auto; float: none; margin: 0; padding: 0; border: 0; background: transparent; list-style: none; }
#sakolenter-blog-reference .sc-blog-paging ul > li > :is(a, span) { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; min-width: 34px; height: 34px; margin: 0; padding: 0; border: 1px solid #dbe2ed; border-radius: 7px; background: #fff; color: #7b879a; font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1; text-align: center; text-decoration: none; box-shadow: none; }
#sakolenter-blog-reference .sc-blog-paging ul > :is(.active, .current-page) > :is(a, span) { border-color: var(--sc-blog-red); background: var(--sc-blog-red); color: #fff; }
#sakolenter-blog-reference .sc-blog-paging li:not(.active):not(.current-page) > a:hover { border-color: #f3a4ae; background: #fff2f4; color: var(--sc-blog-red); }
#sakolenter-blog-reference .sc-blog-paging li:is(.previous-page, .next-page, .first-page, .last-page) > :is(a, span) { overflow: hidden; font-size: 0; color: #7b879a; }
#sakolenter-blog-reference .sc-blog-paging li:is(.previous-page, .next-page, .first-page, .last-page) > :is(a, span)::before { content: ""; display: block; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m14 5-7 7 7 7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m14 5-7 7 7 7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
#sakolenter-blog-reference .sc-blog-paging li:is(.previous-page, .first-page) > :is(a, span)::before { transform: rotate(180deg); }
#sakolenter-blog-reference .sc-blog-paging li.disabled > :is(a, span) { opacity: .4; pointer-events: none; }
#sakolenter-blog-reference .sc-blog-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 50px 15px; text-align: center; }
#sakolenter-blog-reference .sc-blog-empty > .sc-blog-icon { width: 46px; height: 46px; color: #9ca7b7; }
#sakolenter-blog-reference .sc-blog-empty h3 { font-size: 20px; font-weight: 900; }
#sakolenter-blog-reference .sc-blog-empty p { color: var(--sc-blog-muted); }
#sakolenter-blog-reference .sc-blog-empty .sc-blog-button { width: auto; margin-top: 6px; }

#sakolenter-blog-reference .sc-blog-share-dialog { position: fixed; width: min(460px, calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 22px; overflow: auto; border: 1px solid var(--sc-blog-border); border-radius: 14px; background: #fff; color: #171b21; font-family: inherit; text-align: right; direction: rtl; box-shadow: 0 16px 60px rgba(17,24,39,.18); }
#sakolenter-blog-reference .sc-blog-share-dialog:not([open]) { display: none; }
#sakolenter-blog-reference .sc-blog-share-dialog::backdrop { background: rgba(15,23,34,.55); }
#sakolenter-blog-reference .sc-blog-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
#sakolenter-blog-reference .sc-blog-dialog-heading h2 { font-size: 18px; font-weight: 900; }
#sakolenter-blog-reference .sc-blog-dialog-heading button { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; margin: 0; padding: 0; border: 0; border-radius: 6px; background: #f5f6f8; color: #6b778a; font-size: 24px; cursor: pointer; }
#sakolenter-blog-reference .sc-blog-dialog-post-title { margin-bottom: 14px; color: var(--sc-blog-muted); font-size: 13px; overflow-wrap: anywhere; }
#sakolenter-blog-reference .sc-blog-share-dialog label { display: block; margin-bottom: 6px; font-size: 12px; }
#sakolenter-blog-reference #sc-blog-share-link { display: block; width: 100%; min-width: 0; height: 44px; margin: 0; padding: 8px 12px; border: 1px solid #dfe5ed; border-radius: 7px; background: #fafbfd; font-size: 12px; color: #343c49; text-align: left; }
#sakolenter-blog-reference .sc-blog-dialog-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
#sakolenter-blog-reference .sc-blog-dialog-actions .sc-blog-button { font-size: 12px; }
#sakolenter-blog-reference .sc-blog-share-status { min-height: 24px; margin-top: 10px; color: #24894d; font-size: 12px; }

@media (min-width: 1600px) {
    #sakolenter-blog-reference { --sc-blog-gutter: 38px; }
    #sakolenter-blog-reference .sc-blog-layout { gap: 22px; }
    #sakolenter-blog-reference .sc-blog-main-panel { padding: 18px; }
    #sakolenter-blog-reference .sc-blog-panel:not(.sc-blog-main-panel) { padding: 22px; }
    #sakolenter-blog-reference .sc-blog-article h3 { font-size: 20px; }
    #sakolenter-blog-reference .sc-blog-article__excerpt { font-size: 14px; }
    #sakolenter-blog-reference .sc-blog-article__body { padding: 13px; }
    #sakolenter-blog-reference .sc-blog-recent-link { min-height: 100px; }
}
@media (max-width: 1199px) {
    #sakolenter-blog-reference { --sc-blog-gutter: 22px; }
    #sakolenter-blog-reference .sc-blog-hero { grid-template-columns: 54% minmax(0, 1fr); padding-right: 119px; }
    #sakolenter-blog-reference .sc-blog-hero__visual { width: 54%; }
    #sakolenter-blog-reference .sc-blog-hero__icon { right: 19px; width: 91px; height: 91px; }
    #sakolenter-blog-reference .sc-blog-hero__icon .sc-blog-icon { width: 49px; height: 49px; }
    #sakolenter-blog-reference .sc-blog-layout { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
    #sakolenter-blog-reference .sc-blog-panel { padding: 13px; }
    #sakolenter-blog-reference .sc-blog-icon-badge { flex-basis: 48px; width: 48px; height: 48px; }
    #sakolenter-blog-reference .sc-blog-icon-badge .sc-blog-icon { width: 26px; height: 26px; }
    #sakolenter-blog-reference .sc-blog-side-heading { gap: 8px; }
    #sakolenter-blog-reference .sc-blog-side-heading h2 { font-size: 16px; }
    #sakolenter-blog-reference .sc-blog-search > p { margin-right: 0; margin-top: 7px; }
    #sakolenter-blog-reference .sc-blog-recent-link { gap: 8px; }
    #sakolenter-blog-reference .sc-blog-recent-link img { flex-basis: 65px; width: 65px; max-width: 65px; height: 56px; }
    #sakolenter-blog-reference .sc-blog-recent-link strong { font-size: 12px; }
    #sakolenter-blog-reference .sc-blog-support .sc-blog-side-heading h2 { font-size: 13px; }
}
@media (max-width: 991px) {
    #sakolenter-blog-reference { --sc-blog-gutter: 16px; }
    #sakolenter-blog-reference .sc-blog-hero { grid-template-columns: 45% minmax(0, 1fr); padding-right: 108px; }
    #sakolenter-blog-reference .sc-blog-hero__visual { width: 45%; }
    #sakolenter-blog-reference .sc-blog-hero h1 { font-size: clamp(25px, 4.1vw, 36px); }
    #sakolenter-blog-reference .sc-blog-hero p { font-size: 13px; }
    #sakolenter-blog-reference .sc-blog-hero__icon { right: 16px; width: 78px; height: 78px; }
    #sakolenter-blog-reference .sc-blog-hero__icon .sc-blog-icon { width: 40px; height: 40px; }
    #sakolenter-blog-reference .sc-blog-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    #sakolenter-blog-reference .sc-blog-main { grid-row: 2; }
    #sakolenter-blog-reference .sc-blog-sidebar { display: contents; }
    #sakolenter-blog-reference .sc-blog-search { grid-row: 1; direction: rtl; }
    #sakolenter-blog-reference .sc-blog-recent { grid-row: 3; direction: rtl; }
    #sakolenter-blog-reference .sc-blog-support { grid-row: 4; direction: rtl; }
    #sakolenter-blog-reference .sc-blog-panel { padding: 16px; }
    #sakolenter-blog-reference .sc-blog-search-native { max-width: 100%; }
    #sakolenter-blog-reference .sc-blog-search > p { margin-top: -5px; margin-right: 60px; }
    #sakolenter-blog-reference .sc-blog-recent-link img { flex-basis: 82px; width: 82px; max-width: 82px; height: 62px; }
    #sakolenter-blog-reference .sc-blog-support .sc-blog-side-heading h2 { font-size: 16px; }
    #sakolenter-blog-reference .sc-blog-support > p { text-align: right; }
}
@media (max-width: 575px) {
    #sakolenter-blog-reference { --sc-blog-gutter: 12px; font-size: 13px; }
    #sakolenter-blog-reference .sc-blog-hero { display: grid; grid-template-columns: minmax(0, 1fr) 68px; grid-template-rows: auto auto; min-height: 0; padding: 0; border-radius: 10px; }
    #sakolenter-blog-reference .sc-blog-hero__visual { position: relative; grid-column: 1 / -1; grid-row: 1; top: auto; bottom: auto; left: auto; width: 100%; aspect-ratio: 748 / 194; z-index: 0; }
    #sakolenter-blog-reference .sc-blog-hero__visual::before { top: 0; width: 100%; transform: none; }
    #sakolenter-blog-reference .sc-blog-hero__copy { grid-column: 1; grid-row: 2; padding: 13px 12px 15px; }
    #sakolenter-blog-reference .sc-blog-breadcrumb { margin-bottom: 4px; gap: 8px; font-size: 10px; }
    #sakolenter-blog-reference .sc-blog-hero h1 { font-size: clamp(22px, 5.6vw, 30px); line-height: 1.6; white-space: normal; }
    #sakolenter-blog-reference .sc-blog-hero p { margin-top: 2px; font-size: 11px; line-height: 1.8; }
    #sakolenter-blog-reference .sc-blog-hero__icon { position: static; grid-column: 2; grid-row: 2; justify-self: start; width: 55px; height: 55px; transform: none; }
    #sakolenter-blog-reference .sc-blog-hero__icon .sc-blog-icon { width: 30px; height: 30px; }
    #sakolenter-blog-reference .sc-blog-layout { margin-top: 12px; gap: 12px; }
    #sakolenter-blog-reference .sc-blog-main-panel { padding: 12px; }
    #sakolenter-blog-reference .sc-blog-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    #sakolenter-blog-reference .sc-blog-toolbar { min-height: 72px; gap: 10px; padding-right: 0; }
    #sakolenter-blog-reference .sc-blog-toolbar h2 { font-size: 20px; }
    #sakolenter-blog-reference .sc-blog-toolbar p { font-size: 11px; }
    #sakolenter-blog-reference .sc-blog-rss { flex-basis: 32px; width: 32px; height: 32px; }
    #sakolenter-blog-reference .sc-blog-article h3 { font-size: 16px; }
    #sakolenter-blog-reference .sc-blog-article__excerpt { font-size: 12px; }
    #sakolenter-blog-reference .sc-blog-article__body { padding: 10px; }
    #sakolenter-blog-reference .sc-blog-panel:not(.sc-blog-main-panel) { padding: 13px; }
    #sakolenter-blog-reference .sc-blog-search > p { margin: 5px 0 12px; font-size: 11px; }
    #sakolenter-blog-reference .sc-blog-search-native input[type="text"],
    #sakolenter-blog-reference .sc-blog-search-native input[type="search"] { font-size: 11px; }
    #sakolenter-blog-reference .sc-blog-recent-link strong { font-size: 13px; }
    #sakolenter-blog-reference .sc-blog-support .sc-blog-side-heading h2 { font-size: 14px; }
    #sakolenter-blog-reference .sc-blog-dialog-actions { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    #sakolenter-blog-reference * { transition: none !important; scroll-behavior: auto !important; }
}