

@layer components {
@media (max-width: 1023px) {

  .nd-cast .page-hero { padding-top: 0; padding-bottom: 0; }

  .nd-con .mob-rail-cue,
  .nd-cast .mob-rail-cue { margin-top: 8px; }

  .nd-cast .site-actions { margin-top: var(--stack-md); gap: 10px; }

  .nd-cast-draw { height: 360px; }

  .nd-con-fig { aspect-ratio: auto; min-height: 0; }
  .nd-con-bar { flex: 0 0 auto; padding: 9px 14px; }

  .nd-con-body { grid-template-columns: 236px 344px; }

  .nd-con-thread { --nd-crop: 0; padding: 12px 14px; gap: 8px; }
  .nd-con-turn { white-space: normal; max-width: 92%; font-size: 0.8125rem; }
  .nd-con-brand { display: none; }
  .nd-con-count { margin-left: 0; font-size: 0.75rem; letter-spacing: 0.04em; }

  .nd-con-case { padding: 12px 14px; gap: 8px; }
  .nd-con-fk { flex: 0 0 40%; font-size: 0.75rem; }
  .nd-con-fv { font-size: 0.8125rem; }
  .nd-con-reply { margin-top: 10px; }

  .nd-con-fig .mob-rail-cue { color: #C6CED9; }
  .nd-con-fig .mob-rail-cue::after {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.28), transparent);
  }

  .nd-cor-draw { aspect-ratio: 1360 / 1700; }

  .nd-cor-head { margin-top: var(--stack-md); margin-bottom: 0; }
  .nd-cor-coda { margin-top: var(--stack-sm); }

  .nd-same-out { margin-top: 16px; }
  .nd-same-formula { margin-top: 10px; }
  .nd-same-cap { margin-top: 8px; }
  .nd-same-controls { margin-top: 16px; }

}

@media (max-width: 380px) {

  .nd-cast-draw { height: 340px; }
  .nd-cor-draw { aspect-ratio: 1360 / 1620; }

  .nd-con-body { grid-template-columns: 206px 344px; }
}

}

@layer components {
@media (max-width: 1023px) {

  .main-content > .nd-cast {
    padding-top: calc(var(--navbar-h) + var(--hero-lede));
  }

  .nd-cast-head { margin-top: 0; margin-bottom: var(--stack-md); }

  .nd-cast-draw { margin-bottom: 48px; }

  .nd-cast-cap {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: var(--stack-sm);
    font-size: var(--mt-body);
    line-height: var(--mt-lh-lede);
    color: var(--text-secondary);
  }

  .nd-same-fig {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-5);
    aspect-ratio: auto;
    min-height: 0;
  }

  .nd-same-body {
    position: relative;
    inset: auto;
    flex: 0 0 40%;
    width: auto;
    height: auto;
    aspect-ratio: 4 / 5;
    align-self: flex-start;
  }

  .nd-same-out {
    position: static;
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 0;
  }

  .nd-line-fig { min-height: 273px; }

}

@media (min-width: 620px) {
  .nd-con-fig .mob-rail-cue { display: none; }
  .nd-con-body {
    -webkit-mask-image: none;
            mask-image: none;
  }
}

@media (max-width: 1023px) {
  .nd-same-body-k {
    position: absolute;
    left: 0;
    top: 1.8%;
    width: 74.07%;
    padding: 10px 12px;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #E6EBF3;
  }

  .nd-same-body[data-tier="elite"] ~ .nd-same-body-k { color: #121724; }

  .nd-same-opt {
    min-width: 40px;
    padding-inline: 5px;
    margin-inline: -5px;
    text-align: center;
  }

  .nd-same-formula { text-wrap: balance; }
}

}

@layer components {
@media (max-width: 1023px) {

  .nd-con-reply-t { font-size: var(--mt-label); }

  .nd-same-opt { font-size: var(--mt-label); }

}
}

@layer components {
@media (max-width: 1023px) {
  .main-content.main-content .nd-cast .page-hero { padding-top: 0; }
}
}
