@layer components {

.art-fig-unit { display: contents; }

@media (max-width: 1023px) {

  .art-fig-unit { display: block; }

  .art-figure-inner .fig-lab { font-size: 12px; letter-spacing: 0.10em; }
  .art-nav-label { font-size: 12px; }
  .blog-filter__label { font-size: 12px; }

  .art-figure-src { font-size: 12px; }

  @media (max-width: 560px) {
    .art-figure-inner { padding: var(--space-3); }
    .art-figure-cap { margin-top: var(--space-3); }

    .art-figure-inner .fig-check { row-gap: 0; }
    .art-figure-inner .fig-check .fig-val { margin-top: var(--space-2); }
    .art-figure-inner .fig-check .fig-out { margin-top: 2px; }
    .art-figure-inner .fig-check .fig-band {
      margin-top: var(--space-3);
      padding-top: var(--space-2);
    }
    .art-figure-inner .fig-check > .fig-turn {
      margin-top: var(--space-4);
      padding-top: var(--space-3);
    }
  }

  .art-figure-inner .obj-phone .art-fig-stamp { font-size: 12px; }

  .blog-filter__btn { padding-top: 12px; }
  .blog-filter__row { row-gap: var(--space-2); }

  .art-figure-inner .obj-phone { max-width: 380px; }

  .blog-section .cards-grid {
    display: flex;
    grid-template-columns: none;
    column-gap: var(--space-6);
    row-gap: 0;
    overflow-x: auto;
    padding-bottom: var(--space-2);
  }

  .blog-section .cards-grid > .cards-grid__cell { flex: 0 0 15.5rem; }

  .main-content > .blog-section { padding-top: var(--space-6); }
  .blog-section__head { margin-bottom: var(--space-4); padding-top: var(--space-4); }
  .blog-filter { margin-top: var(--space-4); padding-top: var(--space-4); }
  .blog-filter__label { margin-bottom: var(--space-3); }
  .blog-foot { margin-top: var(--space-4); padding-top: var(--space-4); }

  .blog-lede { row-gap: var(--space-6); }
  .main-content > .blog-lede { padding-bottom: var(--space-6); }
}
}