/* v0.7 responsive rules. Keep media large without overflow. */
@media screen and (max-width: 900px) {
  html[data-experience="home"] #content-inner.layout,
  html[data-experience="gallery"] #content-inner.layout,
  html[data-experience="video"] #content-inner.layout {
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }

  .media-feature-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 380px 300px;
  }

  .natural-gallery-demo {
    grid-template-columns: 1fr;
    grid-template-rows: 380px 240px 240px;
  }

  .natural-gallery-demo .natural-gallery-main {
    grid-row: auto;
  }

  .about-grid {
    grid-template-columns: 1fr;
  }

  html[data-experience="archive"] .article-sort-item-img {
    flex-basis: 110px;
    width: 110px;
    height: 84px;
  }

  html[data-bg] #web_bg::before {
    opacity: calc(var(--bg-photo-opacity) * .70);
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@media screen and (max-width: 768px) {
  #page-header.full_page {
    min-height: 82vh;
  }

  #site-title {
    font-size: 2rem !important;
  }

  #site-subtitle {
    font-size: 1rem !important;
  }

  html[data-experience]:not([data-experience="home"]) #page-header.not-home-page {
    height: 108px !important;
    min-height: 108px !important;
  }

  html[data-experience="reading"] #page-header.post-bg {
    height: 148px !important;
    min-height: 148px !important;
  }

  html[data-experience]:not([data-experience="home"]) #page-header.not-home-page #page-site-info {
    padding-top: 28px !important;
  }

  html[data-experience="gallery"] #content-inner.layout,
  html[data-experience="video"] #content-inner.layout,
  html[data-experience="reading"] #content-inner.layout,
  html[data-experience="archive"] #content-inner.layout,
  html[data-experience="about"] #content-inner.layout {
    padding-top: 8px !important;
  }

  .natural-page-intro {
    width: 100%;
    max-width: 100% !important;
    margin-bottom: .55rem !important;
    padding: 0 12px !important;
    box-sizing: border-box;
  }

  .natural-page-intro h2 {
    font-size: 1.28rem !important;
  }

  .natural-page-intro p {
    max-width: 100%;
    padding: 0 4px;
    font-size: .82rem;
    overflow-wrap: anywhere;
  }

  .natural-video-demo,
  .natural-video-poster,
  .natural-video-copy,
  .pan123-video-list,
  .pan123-video-card,
  .natural-gallery-demo,
  .natural-gallery-demo figure,
  .natural-gallery-demo img {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .natural-video-copy {
    padding: 1.15rem 1.2rem 1.35rem !important;
  }

  .natural-video-copy p {
    overflow-wrap: anywhere;
  }
}

@media screen and (max-width: 600px) {
  .appearance-switcher {
    left: 14px;
    bottom: 18px;
  }

  .skin-panel,
  .bg-panel {
    width: min(270px,calc(100vw - 28px));
  }

  .skin-toggle,
  .bg-toggle {
    width: 44px;
    height: 44px;
  }

  html[data-experience="home"] #content-inner.layout,
  html[data-experience="gallery"] #content-inner.layout,
  html[data-experience="video"] #content-inner.layout,
  html[data-experience="about"] #content-inner.layout,
  html[data-experience="archive"] #content-inner.layout,
  html[data-experience="reading"] #content-inner.layout {
    padding-left: 12px;
    padding-right: 12px;
  }

  .media-feature-grid {
    grid-template-rows: 320px 260px;
    gap: 14px;
  }

  .media-feature {
    border-radius: 20px;
  }

  .media-feature-overlay {
    padding: 20px;
  }

  .media-home-note {
    align-items: flex-start;
  }

  .natural-gallery-demo {
    grid-template-rows: 300px 205px 205px;
    gap: 12px;
  }

  .natural-video-play {
    width: 60px;
    height: 60px;
  }

  html[data-experience="archive"] .article-sort-item {
    gap: 12px;
    padding: 12px;
    border-radius: 16px;
  }

  html[data-experience="archive"] .article-sort-item-img {
    flex-basis: 82px;
    width: 82px;
    height: 72px;
  }

  html[data-experience="reading"] #post #article-container {
    padding: 26px 18px;
    border-radius: 20px;
  }
}