/* =====================================================================
 * Yaghut Info Box — frontend
 *   .yaghut-ibx--modern  : new_ui = 1  (کارت دوستونه)
 *   .yaghut-ibx--legacy  : new_ui = 0  (کارت باریک کنار متن)
 * انتخابگرها عمداً دوکلاسه‌اند تا بر قواعد عمومی .deysg-black-box (p, h2, img, ul, li) غلبه کنند.
 * ===================================================================== */

.yaghut-ibx {
    --ibx-primary: #880f35;
    --ibx-primary-deep: #5a0a24;
    --ibx-accent: #bc2050;
    --ibx-navy: #344258;
    --ibx-gold: #d9bb8a;
    --ibx-gold-soft: #f1dfbd;
    --ibx-ink: #1f2633;
    --ibx-muted: #6b7280;
    --ibx-line: rgba(52, 66, 88, .12);
    --ibx-soft: #fbf4f6;

    box-sizing: border-box;
    direction: rtl;
    text-align: right;
    color: var(--ibx-ink);
}
.yaghut-ibx *,
.yaghut-ibx *::before,
.yaghut-ibx *::after { box-sizing: border-box; }

/* ---------- محتوای مقدارها (مشترک) ---------- */
.yaghut-ibx .yaghut-ibx__rows dd,
.yaghut-ibx .yaghut-ibx__legacy-rows dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.yaghut-ibx dd p,
.yaghut-ibx dd div { margin: 0; padding: 0; color: inherit; font-weight: inherit; font-variation-settings: inherit; }

.yaghut-ibx dd ul,
.yaghut-ibx dd ol { margin: .15rem 0; padding-inline-start: 1.15rem; padding-inline-end: 0; }
.yaghut-ibx dd ul { list-style: disc outside; }
.yaghut-ibx dd ol { list-style: decimal outside; }
.yaghut-ibx .yaghut-ibx__rows dd li,
.yaghut-ibx .yaghut-ibx__legacy-rows dd li {
    padding: 0; margin: 0 0 .15rem; font-size: inherit; color: inherit;
    font-weight: inherit; font-variation-settings: inherit; display: list-item;
}
.yaghut-ibx dd li::marker { color: var(--ibx-accent); }

.yaghut-ibx dd a {
    color: var(--ibx-accent);
    text-decoration: none;
    border-bottom: 1px dashed rgba(188, 32, 80, .45);
    transition: color .15s ease, border-color .15s ease;
}
.yaghut-ibx dd a:hover,
.yaghut-ibx dd a:focus-visible { color: var(--ibx-primary); border-bottom-color: var(--ibx-primary); }
/* آیکن‌ها با SVG (نه فونت آیکن): به نسخه و بارگذاری FontAwesome وابسته نیستند و مربع خالی نمی‌سازند */
.yaghut-ibx dd a[target="_blank"]::after {
    content: "";
    display: inline-block;
    width: .72em;
    height: .72em;
    margin-inline-start: .3em;
    vertical-align: -.05em;
    background: currentColor;
    opacity: .6;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.41l-8.29 8.3-1.42-1.42 8.3-8.29H14V3zM5 5h6v2H5v12h12v-6h2v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z'/%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 3h7v7h-2V6.41l-8.29 8.3-1.42-1.42 8.3-8.29H14V3zM5 5h6v2H5v12h12v-6h2v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.yaghut-ibx .yaghut-ibx__age { color: var(--ibx-muted); font-weight: 500; font-size: .88em; white-space: nowrap; }

/* =====================================================================
 * Modern
 * ===================================================================== */
.yaghut-ibx--modern {
    position: relative;
    display: grid;
    grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
    margin: 0 0 2.25rem;
    background: #fff;
    border: 1px solid var(--ibx-line);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 24px 48px -32px rgba(52, 66, 88, .45), 0 2px 6px rgba(52, 66, 88, .05);
}
.yaghut-ibx--modern.is-no-media { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); }

/* ستون هویت */
.yaghut-ibx--modern .yaghut-ibx__identity {
    position: relative;
    padding: 1.5rem 1.35rem 1.75rem;
    color: #fff;
    background:
        radial-gradient(120% 60% at 100% 0%, rgba(217, 187, 138, .28) 0%, transparent 60%),
        radial-gradient(90% 50% at 0% 100%, rgba(188, 32, 80, .55) 0%, transparent 65%),
        linear-gradient(165deg, #a3123f 0%, var(--ibx-primary) 45%, var(--ibx-primary-deep) 100%);
}
/* بافت نقطه‌ای ظریف */
.yaghut-ibx--modern .yaghut-ibx__identity::before {
    content: "";
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.2px);
    background-size: 14px 14px;
    pointer-events: none;
}
.yaghut-ibx--modern .yaghut-ibx__identity-inner {
    position: sticky;
    top: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .75rem;
}

.yaghut-ibx--modern .yaghut-ibx__photo {
    width: 100%;
    margin: 0 0 .35rem;
    padding: 0;
    border-radius: 20px;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .14), 0 22px 36px -18px rgba(0, 0, 0, .6);
    overflow: hidden;
}
.yaghut-ibx--modern .yaghut-ibx__photo img {
    display: block;
    width: 100%;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 20px;
}

.yaghut-ibx--modern .yaghut-ibx__chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .8rem;
    font-size: .78rem;
    font-weight: 700;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    backdrop-filter: blur(4px);
}
.yaghut-ibx--modern .yaghut-ibx__chip .fa { color: var(--ibx-gold); }

.yaghut-ibx .yaghut-ibx__name {
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: 1.45rem;
    line-height: 1.6;
    font-weight: 1000;
    font-variation-settings: "wght" 1000, "DOTS" 4;
}
.yaghut-ibx .yaghut-ibx__tagline {
    margin: 0;
    padding: 0;
    color: var(--ibx-gold-soft);
    font-size: .9rem;
    line-height: 1.9;
    font-weight: 600;
    font-variation-settings: "wght" 600;
}

/* ستون اطلاعات */
.yaghut-ibx--modern .yaghut-ibx__body {
    position: relative;
    min-width: 0;
    padding: 1.6rem 1.9rem 1.5rem;
    background:
        linear-gradient(180deg, rgba(251, 244, 246, .7) 0%, rgba(255, 255, 255, 0) 140px),
        #fff;
}

.yaghut-ibx--modern .yaghut-ibx__section + .yaghut-ibx__section { margin-top: 1.5rem; }

.yaghut-ibx .yaghut-ibx__section-title {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin: 0 0 .5rem;
    padding: 0;
    color: var(--ibx-primary);
    font-size: 1rem;
    line-height: 1.8;
    font-weight: 900;
    font-variation-settings: "wght" 900, "DOTS" 4;
}
.yaghut-ibx .yaghut-ibx__section-title::before {
    content: "";
    flex: 0 0 auto;
    width: 6px; height: 1.15em;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--ibx-accent), var(--ibx-primary));
}
.yaghut-ibx .yaghut-ibx__section-title::after {
    content: "";
    flex: 1 1 auto;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--ibx-gold) 100%);
    opacity: .55;
}

.yaghut-ibx--modern .yaghut-ibx__rows { margin: 0; padding: 0; }

.yaghut-ibx--modern .yaghut-ibx__row {
    display: grid;
    grid-template-columns: 9.5rem minmax(0, 1fr);
    gap: 1rem;
    align-items: baseline;
    padding: .7rem .6rem;
    border-bottom: 1px dashed var(--ibx-line);
    border-radius: 10px;
    transition: background-color .15s ease;
}
.yaghut-ibx--modern .yaghut-ibx__row:last-child { border-bottom: 0; }
.yaghut-ibx--modern .yaghut-ibx__row:hover { background: var(--ibx-soft); }
.yaghut-ibx--modern .yaghut-ibx__row.is-unlabeled { grid-template-columns: minmax(0, 1fr); }

.yaghut-ibx--modern .yaghut-ibx__row dt {
    position: relative;
    margin: 0;
    padding-inline-start: .95rem;
    color: var(--ibx-navy);
    font-size: .88rem;
    line-height: 1.9;
    font-weight: 800;
    font-variation-settings: "wght" 800;
}
.yaghut-ibx--modern .yaghut-ibx__row dt::before {
    content: "";
    position: absolute;
    top: .72em;
    inset-inline-start: 0;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--ibx-gold);
    box-shadow: 0 0 0 3px rgba(217, 187, 138, .25);
}
.yaghut-ibx--modern .yaghut-ibx__row dd {
    color: var(--ibx-ink);
    font-size: .97rem;
    line-height: 1.95;
    font-weight: 600;
    font-variation-settings: "wght" 600;
}
.yaghut-ibx--modern .yaghut-ibx__row.is-date dd::before {
    content: "";
    display: inline-block;
    width: .95em;
    height: .95em;
    margin-inline-end: .45rem;
    vertical-align: -.12em;
    background: var(--ibx-accent);
    opacity: .7;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2a1 1 0 0 1 1 1v1h8V3a1 1 0 1 1 2 0v1h1a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h1V3a1 1 0 0 1 1-1zm13 8H4v9a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-9zM8 13a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm4 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm4 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/%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='M7 2a1 1 0 0 1 1 1v1h8V3a1 1 0 1 1 2 0v1h1a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h1V3a1 1 0 0 1 1-1zm13 8H4v9a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-9zM8 13a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm4 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm4 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- جمع‌شدن جعبه‌های پرفیلد (بدون JS) --- */
.yaghut-ibx__more-toggle {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.yaghut-ibx--modern.is-collapsible .yaghut-ibx__content {
    max-height: 32rem;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
    transition: max-height .35s ease;
}
.yaghut-ibx--modern .yaghut-ibx__more-toggle:checked ~ .yaghut-ibx__content {
    max-height: none;
    -webkit-mask-image: none;
    mask-image: none;
}
.yaghut-ibx--modern .yaghut-ibx__more {
    display: flex;
    justify-content: center;
    margin: .75rem auto 0;
    width: max-content;
    padding: .45rem 1.25rem;
    color: var(--ibx-primary);
    font-size: .88rem;
    font-weight: 800;
    background: var(--ibx-soft);
    border: 1px solid rgba(136, 15, 53, .15);
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    transition: background-color .15s ease, color .15s ease;
}
.yaghut-ibx--modern .yaghut-ibx__more:hover { color: #fff; background: var(--ibx-primary); }
.yaghut-ibx--modern .yaghut-ibx__more .fa { margin-inline-start: .35rem; }
.yaghut-ibx--modern .yaghut-ibx__more-close { display: none; }
.yaghut-ibx--modern .yaghut-ibx__more-toggle:checked ~ .yaghut-ibx__more .yaghut-ibx__more-open { display: none; }
.yaghut-ibx--modern .yaghut-ibx__more-toggle:checked ~ .yaghut-ibx__more .yaghut-ibx__more-close { display: inline; }
.yaghut-ibx--modern .yaghut-ibx__more-toggle:focus-visible ~ .yaghut-ibx__more { outline: 2px solid var(--ibx-accent); outline-offset: 2px; }

/* --- سربرگ بدون جعبه اطلاعات: فقط ستون هویت، وسط صفحه --- */
.yaghut-ibx--modern.yaghut-ibx--hero,
.yaghut-ibx--modern.yaghut-ibx--hero.is-no-media {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 400px;
    margin: 0 auto 2.25rem;
}
.yaghut-ibx--hero .yaghut-ibx__identity { padding: 1.5rem 1.5rem 1.75rem; }
.yaghut-ibx--hero .yaghut-ibx__identity-inner { position: static; }
.yaghut-ibx--hero.is-no-media .yaghut-ibx__identity { padding: 2rem 1.5rem; }

/* تبلت */
@media (max-width: 1023px) {
    .yaghut-ibx--modern { grid-template-columns: minmax(220px, 260px) minmax(0, 1fr); }
    .yaghut-ibx--modern .yaghut-ibx__body { padding: 1.35rem 1.25rem; }
    .yaghut-ibx--modern .yaghut-ibx__row { grid-template-columns: 8rem minmax(0, 1fr); gap: .75rem; }
}

/* موبایل: کارت زیر هم */
@media (max-width: 768px) {
    .yaghut-ibx--modern,
    .yaghut-ibx--modern.is-no-media { grid-template-columns: minmax(0, 1fr); border-radius: 20px; margin-bottom: 1.5rem; }

    .yaghut-ibx--modern .yaghut-ibx__identity { padding: 1.35rem 1rem 1.25rem; }
    .yaghut-ibx--modern .yaghut-ibx__identity-inner { position: static; gap: .6rem; }
    .yaghut-ibx--modern .yaghut-ibx__photo { width: min(230px, 70%); border-radius: 18px; }
    .yaghut-ibx--modern .yaghut-ibx__photo img { border-radius: 18px; }
    .yaghut-ibx .yaghut-ibx__name { font-size: 1.25rem; }

    .yaghut-ibx--modern .yaghut-ibx__body { padding: 1.1rem .85rem 1.1rem; }
    .yaghut-ibx--modern .yaghut-ibx__row { grid-template-columns: 6.75rem minmax(0, 1fr); gap: .6rem; padding: .6rem .35rem; }
    .yaghut-ibx--modern .yaghut-ibx__row dt { font-size: .82rem; }
    .yaghut-ibx--modern .yaghut-ibx__row dd { font-size: .92rem; }
    .yaghut-ibx--modern.is-collapsible .yaghut-ibx__content { max-height: 26rem; }
}

/* موبایل کوچک: عنوان بالای مقدار */
@media (max-width: 400px) {
    .yaghut-ibx--modern .yaghut-ibx__row { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
}

/* =====================================================================
 * Legacy
 * ===================================================================== */
.yaghut-ibx--legacy {
    float: left;
    clear: left;
    width: 340px;
    max-width: 100%;
    margin: .25rem 1.75rem 1.5rem 0;
    padding: .85rem .85rem 1rem;
    /* همان پس‌زمینه‌ی نقش‌دار جدول‌های یاقوت (.yaghut-table) */
    background-color: #fff;
    background-image: url("https://dl.yaghut.ir/media/mediawiki/2/2f/18c06d17-4010-4e9a-9cca-16667db867d1.png");
    background-size: contain;
    background-position: center top;
    background-repeat: repeat;
    border: 1px solid #d9a2b3;
    border-radius: 16px;
    box-shadow: 0 14px 30px -24px rgba(136, 15, 53, .55);
    font-size: .93rem;
}

.yaghut-ibx--legacy .yaghut-ibx__legacy-photo { margin: 0 0 .6rem; padding: 0; }
.yaghut-ibx--legacy .yaghut-ibx__legacy-photo img {
    display: block;
    width: 100%;
    max-width: 100% !important;
    height: auto !important;
    max-height: 420px;
    object-fit: cover;
    border-radius: 12px;
}

.yaghut-ibx--legacy .yaghut-ibx__legacy-name {
    margin: 0 0 .6rem;
    padding: .2rem .5rem .55rem;
    text-align: center;
    color: var(--ibx-navy);
    font-size: 1.05rem;
    font-weight: 900;
    font-variation-settings: "wght" 900;
    border-bottom: 1px solid rgba(217, 162, 179, .5);
}

.yaghut-ibx--legacy .yaghut-ibx__ribbon {
    position: relative;
    margin: .75rem -.85rem .5rem;
    padding: .4rem 1rem;
    text-align: center;
    color: #fff;
    font-size: .92rem;
    font-weight: 900;
    font-variation-settings: "wght" 900;
    background: linear-gradient(90deg, var(--ibx-primary) 0%, #bb204e 50%, var(--ibx-primary) 100%);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 6px 12px -8px rgba(136, 15, 53, .7);
}

.yaghut-ibx--legacy .yaghut-ibx__legacy-rows { margin: 0; padding: 0; }

.yaghut-ibx--legacy .yaghut-ibx__legacy-row {
    display: grid;
    grid-template-columns: 6.6rem minmax(0, 1fr);
    gap: .6rem;
    align-items: center;
    padding: .4rem 0;
    border-bottom: 1px solid rgba(217, 162, 179, .28);
}
.yaghut-ibx--legacy .yaghut-ibx__legacy-row:last-child { border-bottom: 0; }
.yaghut-ibx--legacy .yaghut-ibx__legacy-row.is-unlabeled { grid-template-columns: minmax(0, 1fr); }
.yaghut-ibx--legacy .yaghut-ibx__legacy-row.is-wide { align-items: start; }

.yaghut-ibx--legacy .yaghut-ibx__legacy-row dt { margin: 0; align-self: stretch; display: flex; align-items: center; }
.yaghut-ibx--legacy .yaghut-ibx__legacy-row dt span {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 100%;
    padding: .35rem .55rem .35rem .4rem;
    color: #00244f;
    font-size: .84rem;
    line-height: 1.6;
    font-weight: 900;
    font-variation-settings: "wght" 900;
    background: linear-gradient(270deg, rgba(255, 230, 230, 1) 0%, rgba(249, 205, 207, .45) 45%, rgba(246, 206, 210, .12) 80%, rgba(255, 251, 252, 0) 100%);
    border-radius: 40px 20px 20px 40px;
}

.yaghut-ibx--legacy .yaghut-ibx__legacy-row dd {
    text-align: center;
    color: #4b5563;
    line-height: 1.9;
    font-weight: 700;
    font-variation-settings: "wght" 700;
}
.yaghut-ibx--legacy .yaghut-ibx__legacy-row dd ul,
.yaghut-ibx--legacy .yaghut-ibx__legacy-row dd ol { text-align: right; }

/*
 * المان‌های کنار جعبه‌ی float شده
 * المان بلاکی با پس‌زمینه/حاشیه (blockquote، گفتاورد، فهرست، رسانه و…) به‌طور پیش‌فرض
 * از زیر float رد می‌شود و فقط متنش کنار می‌رود. با display: flow-root خودِ کادر
 * کنار جعبه جمع می‌شود. رسانه‌ها هم به‌جای clear (پریدن به بعد از جعبه) در عرض
 * باقی‌مانده کنار جعبه می‌نشینند و بعد از جعبه دوباره تمام‌عرض می‌شوند.
 *
 * دامنه: فقط داخل .yaghut-has-legacy-ibx (کادر محتوای صفحه‌هایی که جعبه‌ی قدیمی دارند).
 * عمداً انتخابگر فرزندی است نه همسایه (~)؛ چون محتوای صفحه‌های قدیمی معمولاً داخل
 * wrapperهایی مثل div.mw-parser-output است و همسایه‌ی مستقیم جعبه نیست.
 * خود جعبه با :not(.yaghut-ibx, .yaghut-ibx *, .yaghut-toc, .yaghut-toc *, .music-player, .music-player *, .custom_video-player, .custom_video-player *, .new_video-player, .new_video-player *, .card, .card *) مستثنی شده است.
 */
.yaghut-has-legacy-ibx :is(
    blockquote, pre, ul, ol, dl, hr, figure, details, section, aside,
    .box, .yaghut-quote-section, .yaghut-quote-tabs, .yaghut-footnotes,
    .yaghut-media-block, .external-link-box
):not(.yaghut-ibx, .yaghut-ibx *, .yaghut-toc, .yaghut-toc *, .music-player, .music-player *, .custom_video-player, .custom_video-player *, .new_video-player, .new_video-player *, .card, .card *) {
    display: flow-root;
    clear: none;
}

/* جدول و grid ذاتاً کنار float جمع می‌شوند؛ فقط clear برداشته می‌شود */
.yaghut-has-legacy-ibx :is(table, .yaghut-media-row, .yaghut-gallery-grid):not(.yaghut-ibx, .yaghut-ibx *, .yaghut-toc, .yaghut-toc *, .music-player, .music-player *, .custom_video-player, .custom_video-player *, .new_video-player, .new_video-player *, .card, .card *) {
    clear: none;
}

/* width: 100% باعث می‌شود کادر کنار جعبه جا نشود و به زیر آن بپرد؛ عرض خودکار در فضای باقی‌مانده */
.yaghut-has-legacy-ibx :is(
    .yaghut-media-block, .yaghut-media-row, .yaghut-gallery-grid,
    blockquote, figure, section, .box, .yaghut-quote-section, .yaghut-quote-tabs
):not(.yaghut-ibx, .yaghut-ibx *, .yaghut-toc, .yaghut-toc *, .music-player, .music-player *, .custom_video-player, .custom_video-player *, .new_video-player, .new_video-player *, .card, .card *) {
    width: auto;
}

/* رسانه‌ی ۵۰٪ و ۷۵٪ در عرض باقی‌مانده وسط بماند */
.yaghut-has-legacy-ibx .yaghut-media-block:not(.yaghut-ibx *, .yaghut-toc *) { margin-inline: auto; }

/* جعبه float شده نباید از کادر محتوای کوتاه بیرون بزند */
.yaghut-ibx-clear { clear: both; }

/* موبایل: تمام‌عرض و بدون float */
@media (max-width: 768px) {
    .yaghut-ibx--legacy {
        float: none;
        width: 100%;
        max-width: 420px;
        margin: 0 auto 1.5rem;
    }
}