/* ==========================================================================
   YOUBEI / TOUCHLINE — kit.css
   Layer 3 of 4: blocks — pitch, scoreboard, fixtures, tickets, figures,
   steps, faq, news, cta, tables, forms, article body
   ========================================================================== */

@layer blocks {
  /* -------------------------------------------------------------- pitch art */
  .yb-pitch {
    position: relative;
    aspect-ratio: 16 / 11;
    border: 2px solid var(--chalk);
    background:
      repeating-linear-gradient(90deg, var(--turf-800) 0 34px, var(--turf-700) 34px 68px);
    overflow: hidden;
  }
  .yb-pitch__half {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 2px solid var(--hair-chalk);
  }
  .yb-pitch__circle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 27%;
    aspect-ratio: 1;
    border: 2px solid var(--hair-chalk);
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }
  .yb-pitch__spot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 6px;
    background: var(--ref);
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }
  .yb-pitch__box {
    position: absolute;
    top: 22%;
    bottom: 22%;
    width: 15%;
    border: 2px solid var(--hair-chalk);
  }
  .yb-pitch__box--l { left: 0; border-left: 0; }
  .yb-pitch__box--r { right: 0; border-right: 0; }
  .yb-pitch__goal {
    position: absolute;
    top: 38%;
    bottom: 38%;
    width: 5%;
    border: 2px solid rgba(238, 243, 228, 0.45);
  }
  .yb-pitch__goal--l { left: 0; border-left: 0; }
  .yb-pitch__goal--r { right: 0; border-right: 0; }
  .yb-pitch__label {
    position: absolute;
    left: 14px;
    bottom: 12px;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(238, 243, 228, 0.72);
  }
  .yb-pitch__tag {
    position: absolute;
    right: 14px;
    top: 12px;
    padding: 3px 9px;
    background: var(--ref);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.16em;
  }
  .yb-pin {
    position: absolute;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--chalk);
    border: 2px solid var(--ink);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    box-shadow: 0 3px 0 rgba(6, 33, 26, 0.5);
  }
  .yb-pin--flag { background: var(--flag); border-color: var(--flag); color: #fff8f2; }
  .yb-pin--ref { background: var(--ref); border-color: var(--ref); }
  .yb-pin--p1 { left: 16%; top: 24%; }
  .yb-pin--p2 { left: 30%; top: 52%; }
  .yb-pin--p3 { left: 14%; top: 74%; }
  .yb-pin--p4 { left: 62%; top: 30%; }
  .yb-pin--p5 { left: 76%; top: 60%; }
  .yb-pin--p6 { left: 46%; top: 80%; }

  /* -------------------------------------------------------------- scoreboard */
  .yb-board {
    background: #04170f;
    border: 2px solid var(--chalk);
    color: var(--chalk);
    box-shadow: 8px 8px 0 rgba(6, 33, 26, 0.55);
  }
  .yb-board__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--hair-chalk);
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--chalk-2);
  }
  .yb-board__head em { color: var(--ref); }
  .yb-board__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 16px 14px;
  }
  .yb-board__side {
    display: grid;
    gap: 2px;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--chalk);
  }
  .yb-board__side span {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    color: var(--chalk-3);
    text-transform: uppercase;
  }
  .yb-board__side--r { text-align: right; }
  .yb-board__score {
    font-family: var(--font-mono);
    font-size: 2rem;
    line-height: 1;
    letter-spacing: 0.06em;
    color: var(--ref);
    background: rgba(255, 212, 81, 0.08);
    border: 1px solid rgba(255, 212, 81, 0.35);
    padding: 6px 12px;
  }
  .yb-board__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 14px;
    border-top: 1px solid var(--hair-chalk);
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.1em;
    color: var(--chalk-3);
  }

  /* --------------------------------------------------------------- fixtures */
  .yb-fix {
    border-top: 2px solid var(--ink);
  }
  .yb-fix__row {
    display: grid;
    grid-template-columns: 118px minmax(0, 1.15fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    padding: 20px 6px;
    border-bottom: 1px solid var(--hair);
    transition: background 0.16s ease;
  }
  .yb-fix__row:hover { background: rgba(16, 26, 16, 0.035); }
  .yb-fix__date {
    display: grid;
    gap: 1px;
    font-family: var(--font-mono);
  }
  .yb-fix__date strong {
    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: 0.02em;
  }
  .yb-fix__date span {
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    color: var(--turf-700);
    text-transform: uppercase;
  }
  .yb-fix__pair {
    display: grid;
    gap: 4px;
  }
  .yb-fix__pair strong { font-size: 1.02rem; }
  .yb-fix__pair span {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--turf-700);
  }
  .yb-fix__meta { font-size: 0.84rem; color: var(--ink-2); }
  .yb-fix__slot { justify-self: end; }
  .yb-sec--turf .yb-fix { border-color: var(--chalk); }
  .yb-sec--turf .yb-fix__row { border-color: var(--hair-chalk); }
  .yb-sec--turf .yb-fix__row:hover { background: rgba(238, 243, 228, 0.05); }
  .yb-sec--turf .yb-fix__pair strong { color: var(--chalk); }
  .yb-sec--turf .yb-fix__pair span { color: var(--chalk-3); }
  .yb-sec--turf .yb-fix__meta { color: var(--chalk-2); }
  .yb-sec--turf .yb-fix__date strong { color: var(--ref); }
  .yb-sec--turf .yb-fix__date span { color: var(--chalk-3); }

  /* ----------------------------------------------------------------- ticket */
  .yb-ticket {
    position: relative;
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    border: 2px solid var(--ink);
    background: var(--paper);
    overflow: hidden;
  }
  .yb-ticket__stub {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 4px;
    padding: 18px 6px;
    border-right: 2px dashed var(--hair-strong);
    background: var(--paper-2);
    font-family: var(--font-mono);
  }
  .yb-ticket__stub strong {
    font-size: 1.34rem;
    line-height: 1;
    color: var(--turf-800);
  }
  .yb-ticket__stub span {
    font-size: 0.58rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--turf-700);
  }
  .yb-ticket__body {
    display: grid;
    gap: 8px;
    padding: 20px 20px 22px;
  }
  .yb-ticket__body h3 { font-size: 1.14rem; }
  .yb-ticket__body p { font-size: 0.86rem; }
  .yb-ticket__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding-top: 2px;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    color: var(--turf-700);
  }
  .yb-ticket__body a {
    justify-self: start;
    font-size: 0.82rem;
    font-weight: 700;
    border-bottom: 2px solid var(--ref);
  }
  .yb-ticket__body a:hover { border-color: var(--flag); }

  /* ----------------------------------------------------------------- person */
  .yb-person {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 16px;
    padding: 22px;
    border: 1px solid var(--hair);
    border-top: 3px solid var(--turf-800);
    background: var(--paper);
  }
  .yb-person__no {
    display: grid;
    place-items: center;
    width: 58px;
    height: 66px;
    background: var(--turf-900);
    color: var(--ref);
    font-family: var(--font-mono);
    font-size: 1.16rem;
    font-weight: 700;
    clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
  }
  .yb-person__body { display: grid; gap: 6px; }
  .yb-person__body strong { font-size: 1.04rem; }
  .yb-person__body em {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.14em;
    color: var(--turf-700);
    text-transform: uppercase;
  }
  .yb-person__body p { font-size: 0.84rem; }
  .yb-person__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 4px;
  }
  .yb-person__tags span {
    padding: 2px 8px;
    background: rgba(21, 90, 65, 0.1);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    color: var(--turf-800);
  }
  .yb-person__stat {
    display: flex;
    gap: 16px;
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px dashed var(--hair);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--ink-2);
  }
  .yb-person__stat b { color: var(--flag); }

  /* ---------------------------------------------------------------- figures */
  .yb-figures {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 2px solid var(--ink);
  }
  .yb-figure {
    padding: 22px 20px 24px;
    border-right: 1px solid var(--hair);
  }
  .yb-figure:last-child { border-right: 0; }
  .yb-figure__num {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 2rem;
    line-height: 1.1;
    letter-spacing: 0.02em;
    color: var(--turf-900);
  }
  .yb-figure__num em {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    color: var(--turf-700);
  }
  .yb-figure__label {
    margin-top: 6px;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--ink-2);
  }
  .yb-sec--turf .yb-figures { border-color: var(--chalk); }
  .yb-sec--turf .yb-figure { border-color: var(--hair-chalk); }
  .yb-sec--turf .yb-figure__num { color: var(--ref); }
  .yb-sec--turf .yb-figure__num em { color: var(--chalk-3); }
  .yb-sec--turf .yb-figure__label { color: var(--chalk-2); }

  /* ------------------------------------------------------------------ steps */
  .yb-steps {
    display: grid;
    gap: 0;
    border-top: 2px solid var(--ink);
  }
  .yb-step {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 24px;
    padding: 22px 4px;
    border-bottom: 1px solid var(--hair);
  }
  .yb-step__no {
    font-family: var(--font-mono);
    font-size: 1.6rem;
    line-height: 1;
    color: var(--turf-600);
  }
  .yb-step__no small {
    display: block;
    margin-top: 6px;
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--turf-700);
  }
  .yb-step h3 { font-size: 1.06rem; margin-bottom: 4px; }
  .yb-step p { font-size: 0.86rem; }
  .yb-sec--turf .yb-steps { border-color: var(--chalk); }
  .yb-sec--turf .yb-step { border-color: var(--hair-chalk); }
  .yb-sec--turf .yb-step h3 { color: var(--chalk); }
  .yb-sec--turf .yb-step p { color: var(--chalk-2); }
  .yb-sec--turf .yb-step__no { color: var(--ref); }

  /* -------------------------------------------------------------------- faq */
  .yb-faq {
    border-top: 2px solid var(--ink);
  }
  .yb-faq details {
    border-bottom: 1px solid var(--hair);
  }
  .yb-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 4px;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--ink);
  }
  .yb-faq summary::after {
    content: "+";
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 1.2rem;
    color: var(--flag);
    transition: transform 0.18s ease;
  }
  .yb-faq details[open] summary::after { transform: rotate(45deg); }
  .yb-faq__body {
    padding: 0 4px 20px;
    max-width: 78ch;
  }
  .yb-faq__body p { font-size: 0.88rem; }

  /* ------------------------------------------------------------------- news */
  .yb-news {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }
  .yb-news__card {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 22px;
    border: 1px solid var(--hair);
    border-left: 4px solid var(--turf-700);
    background: var(--paper);
    transition: transform 0.16s ease, border-color 0.16s ease;
  }
  .yb-news__card:hover {
    transform: translateY(-3px);
    border-left-color: var(--flag);
  }
  .yb-news__date {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    color: var(--turf-700);
  }
  .yb-news__card h3 { font-size: 1.02rem; }
  .yb-news__card p { font-size: 0.84rem; }
  .yb-news__card .yb-chip { justify-self: start; }
  .yb-news__card a {
    justify-self: start;
    margin-top: 2px;
    font-size: 0.8rem;
    font-weight: 700;
    border-bottom: 2px solid var(--ref);
  }
  .yb-news__card a:hover { border-color: var(--flag); }

  /* -------------------------------------------------------------------- cta */
  .yb-cta {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: 34px;
    align-items: center;
    padding: 40px;
    background: var(--turf-900);
    color: var(--chalk);
    border: 2px solid var(--chalk);
    position: relative;
    overflow: hidden;
  }
  .yb-cta::before {
    content: "";
    position: absolute;
    right: -70px;
    top: -70px;
    width: 220px;
    height: 220px;
    border: 2px solid var(--hair-chalk);
    border-radius: 50%;
  }
  .yb-cta h2 { color: var(--chalk); font-size: var(--step-3); }
  .yb-cta p { color: var(--chalk-2); margin-top: 8px; font-size: 0.92rem; }
  .yb-cta__acts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
  }

  /* ------------------------------------------------------------------ table */
  .yb-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--hair);
    background: var(--paper);
  }
  .yb-table {
    min-width: 620px;
    font-size: 0.86rem;
  }
  .yb-table th,
  .yb-table td {
    padding: 13px 16px;
    text-align: left;
    border-bottom: 1px solid var(--hair);
    vertical-align: top;
  }
  .yb-table thead th {
    background: var(--paper-2);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--turf-800);
    border-bottom: 2px solid var(--ink);
  }
  .yb-table tbody tr:last-child td { border-bottom: 0; }
  .yb-table td strong { color: var(--ink); }

  /* ------------------------------------------------------------------ panel */
  .yb-panel {
    padding: 28px;
    border: 2px solid var(--ink);
    background: var(--paper);
  }
  .yb-panel--turf {
    background: var(--turf-900);
    border-color: var(--chalk);
    color: var(--chalk);
  }
  .yb-panel--turf h2,
  .yb-panel--turf h3 { color: var(--chalk); }
  .yb-panel--turf p { color: var(--chalk-2); }
  .yb-panel__head {
    display: grid;
    gap: 6px;
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px dashed var(--hair-strong);
  }
  .yb-panel--turf .yb-panel__head { border-color: var(--hair-chalk); }
  .yb-panel__head h2 { font-size: var(--step-2); }
  .yb-panel__head p { font-size: 0.86rem; }

  /* ------------------------------------------------------------------- form */
  .yb-form {
    display: grid;
    gap: 16px;
  }
  .yb-field {
    display: grid;
    gap: 6px;
  }
  .yb-field label {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--turf-800);
  }
  .yb-field input,
  .yb-field select,
  .yb-field textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--hair-strong);
    background: #fbf8ee;
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 0.9rem;
  }
  .yb-field input:focus,
  .yb-field select:focus,
  .yb-field textarea:focus {
    outline: 2px solid var(--turf-700);
    outline-offset: 1px;
    border-color: var(--turf-700);
  }
  .yb-field textarea { min-height: 104px; resize: vertical; }
  .yb-field--half { grid-column: span 1; }
  .yb-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .yb-form__note {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    line-height: 1.7;
    letter-spacing: 0.03em;
    color: var(--ink-2);
  }
  .yb-form__note strong { color: var(--flag); }

  /* ----------------------------------------------------------------- article */
  .yb-article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 48px;
    align-items: start;
  }
  .yb-article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    padding: 14px 0;
    margin-bottom: 26px;
    border-block: 1px solid var(--hair);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--turf-700);
  }
  .yb-article__body { display: grid; gap: 18px; max-width: 74ch; }
  .yb-article__body h2 {
    font-size: var(--step-2);
    margin-top: 14px;
    padding-top: 16px;
    border-top: 1px dashed var(--hair-strong);
  }
  .yb-article__body h3 { font-size: 1.08rem; margin-top: 6px; }
  .yb-article__body p { font-size: 0.94rem; line-height: 1.95; }
  .yb-article__body ul { display: grid; gap: 8px; }
  .yb-article__body li {
    position: relative;
    padding-left: 18px;
    font-size: 0.92rem;
    color: var(--ink-2);
  }
  .yb-article__body li::before {
    content: "▪";
    position: absolute;
    left: 0;
    color: var(--flag);
  }
  .yb-quote {
    padding: 20px 24px;
    border-left: 4px solid var(--ref);
    background: var(--paper-2);
    font-size: 0.94rem;
    color: var(--ink);
  }
  .yb-quote strong { display: block; margin-top: 8px; font-size: 0.76rem; letter-spacing: 0.08em; color: var(--turf-700); }

  /* ----------------------------------------------------------------- contact */
  .yb-contact {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
  .yb-contact__item {
    padding: 24px;
    border: 1px solid var(--hair);
    border-top: 3px solid var(--turf-800);
    display: grid;
    gap: 6px;
    align-content: start;
  }
  .yb-contact__item h3 { font-size: 0.94rem; }
  .yb-contact__item p { font-size: 0.86rem; }
  .yb-contact__item a {
    justify-self: start;
    font-family: var(--font-mono);
    font-size: 0.84rem;
    border-bottom: 2px solid var(--ref);
  }
  .yb-contact__item a:hover { border-color: var(--flag); }

  /* ------------------------------------------------------------------- misc */
  .yb-grid {
    display: grid;
    gap: 20px;
  }
  .yb-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yb-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .yb-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .yb-grid--gap-lg { gap: 26px; }

  .yb-frame {
    position: relative;
    display: grid;
    gap: 12px;
    align-content: end;
    min-height: 240px;
    padding: 26px;
    background: var(--turf-800);
    color: var(--chalk);
    overflow: hidden;
  }
  .yb-frame::before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid var(--hair-chalk);
    pointer-events: none;
  }
  .yb-frame strong {
    position: relative;
    font-family: var(--font-mono);
    font-size: 2.4rem;
    line-height: 1;
    color: var(--ref);
  }
  .yb-frame p { position: relative; font-size: 0.84rem; color: var(--chalk-2); }
  .yb-frame h3 {
    position: relative;
    font-size: 1.04rem;
    color: var(--chalk);
  }
  .yb-frame--flag { background: var(--flag); }
  .yb-frame--flag strong { color: #fff8f2; }
  .yb-frame--flag p { color: #ffe6de; }
  .yb-frame--flag h3 { color: #fff8f2; }
  .yb-frame--ref { background: var(--ref); }
  .yb-frame--ref strong { color: var(--ink); }
  .yb-frame--ref p { color: var(--ink-2); }
  .yb-frame--ref h3 { color: var(--ink); }
  .yb-frame--ref::before { border-color: var(--hair-strong); }

  .yb-log {
    display: grid;
    gap: 12px;
  }
  .yb-log__row {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px dashed var(--hair);
    font-size: 0.86rem;
  }
  .yb-log__row span:first-child {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--turf-700);
  }
  .yb-log__row strong { font-weight: 700; }
  .yb-sec--turf .yb-log__row { border-color: var(--hair-chalk); }
  .yb-sec--turf .yb-log__row span:first-child { color: var(--chalk-3); }

  .yb-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border: 1px solid var(--hair-strong);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .yb-badge b { color: var(--flag); font-size: 0.9em; }

  .yb-sponsors {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--hair);
  }
  .yb-sponsors div {
    display: grid;
    place-items: center;
    min-height: 84px;
    padding: 14px;
    border-right: 1px solid var(--hair);
    border-bottom: 1px solid var(--hair);
    font-family: var(--font-mono);
    font-size: 0.76rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--turf-800);
  }

  @media (max-width: 1080px) {
    .yb-article { grid-template-columns: 1fr; gap: 32px; }
    .yb-news { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .yb-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 860px) {
    .yb-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .yb-figure:nth-child(2) { border-right: 0; }
    .yb-figure:nth-child(1),
    .yb-figure:nth-child(2) { border-bottom: 1px solid var(--hair); }
    .yb-fix__row { grid-template-columns: 92px minmax(0, 1fr); gap: 10px 18px; }
    .yb-fix__meta { grid-column: 2; }
    .yb-fix__slot { grid-column: 2; justify-self: start; }
    .yb-cta { grid-template-columns: 1fr; padding: 30px 24px; }
    .yb-cta__acts { justify-content: flex-start; }
    .yb-contact { grid-template-columns: 1fr; }
    .yb-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .yb-sponsors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 620px) {
    .yb-news { grid-template-columns: 1fr; }
    .yb-grid--2,
    .yb-grid--3,
    .yb-grid--4 { grid-template-columns: 1fr; }
    .yb-step { grid-template-columns: 62px minmax(0, 1fr); gap: 14px; }
    .yb-ticket { grid-template-columns: 58px minmax(0, 1fr); }
    .yb-ticket__body { padding: 16px; }
    .yb-panel { padding: 20px; }
    .yb-form__grid { grid-template-columns: 1fr; }
    .yb-board__score { font-size: 1.5rem; padding: 5px 9px; }
    .yb-figures { grid-template-columns: 1fr; }
    .yb-figure { border-right: 0; border-bottom: 1px solid var(--hair); }
    .yb-sponsors { grid-template-columns: 1fr; }
  }
}