@media (max-width: 900px) {
  .blog-index {
    padding: 110px 20px 100px;
  }

  .blog-index__hero-slide {
    min-height: 300px;
  }

  .blog-index__hero-title {
    font-size: 28px;
  }

  .blog-index__topics-grid {
    grid-template-columns: 1fr;
  }

  .blog-index__topics-list {
    grid-template-columns: 1fr;
  }

  .blog-index__insights-notes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .blog-index__cases .blog-article__case-card {
    flex: 0 0 100%;
  }

  .blog-index__life-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Consult Section (Moved from 640px) */
  .blog-index__consult {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .blog-index__consult-head {
    display: none;
  }

  .blog-index__consult-title,
  .blog-index__consult-form,
  .blog-index__consult-footnote {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .blog-index__consult-title {
    font-size: 26px;
    line-height: 1.05;
  }

  .blog-index__consult-form {
    grid-template-columns: 1fr;
    border: none;
    gap: 12px;
  }

  .blog-index__consult-field {
    border: 1px solid #d6d6d6;
    border-radius: 8px;
    padding: 12px 14px 14px;
  }

  .blog-index__consult-field+.blog-index__consult-field {
    border-left: 1px solid #d6d6d6;
    border: 1px solid #d6d6d6;
    /* reset from + selector if needed? No, just ensure full border */
  }

  .blog-index__consult-field input {
    font-size: 18px;
  }

  .blog-index__consult-btn {
    border-radius: 10px;
    padding: 18px 16px;
  }

  .blog-index__consult-note {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: start;
    align-self: stretch;
    font-size: 14px;
    line-height: 1.45;
  }

  .blog-index__consult-footnote {
    font-size: 11px;
  }
}

@media (max-width: 640px) {

  .blog-index-page,
  .blog-index {
    max-width: 100%;
    overflow-x: hidden;
  }

  .blog-index__hero-track,
  .blog-index__topics-mobile-track,
  .blog-index__insights-track,
  .blog-index__life-grid,
  .blog-article__cases-track {
    max-width: 100%;
  }

  .blog-index {
    padding: 28px 16px 80px;
  }

  .blog-index__hero-slide {
    min-height: auto;
    aspect-ratio: 1 / 1;
  }

  .blog-index__hero-title {
    font-size: 22px;
  }

  .blog-index__hero-controls {
    right: 16px;
    bottom: 16px;
  }

  .blog-index__search {
    flex-direction: column;
  }

  .blog-index__search-btn {
    min-width: 100%;
    padding: 14px 18px;
  }

  .blog-index__topics {
    margin-top: 28px;
  }

  .blog-index__topics-feature {
    min-height: auto;
    aspect-ratio: 1 / 1;
  }

  .blog-index__topics-feature-title {
    font-size: 24px;
  }

  .blog-index__insights {
    margin-top: 28px;
    gap: 16px;
  }

  .blog-index__insights-head {
    align-items: flex-start;
  }

  .blog-index__insights-title {
    font-size: 22px;
  }

  .blog-index__insights-track {
    grid-auto-columns: 100%;
  }

  .blog-index__insights-card {
    min-height: auto;
    aspect-ratio: 1 / 1;
  }

  .blog-index__insights--feature .blog-index__insights-feature {
    display: none;
  }

  .blog-index__insights-notes {
    display: none;
  }

  .blog-article__cases {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "track"
      "controls";
    gap: 16px;
  }

  .blog-article__cases-title {
    font-size: 24px;
    line-height: 1.05;
  }

  .blog-article__cases-footer {
    width: 100%;
    justify-content: center;
  }

  .blog-article__cases-btn {
    width: 56px;
    height: 36px;
  }

  .blog-article__cases-track {
    gap: 12px;
  }

  .blog-article__case-card {
    flex: 0 0 100%;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "passport passport"
      "body body"
      "avatar avatar"
      "author button";
    padding: 20px;
    gap: 14px 16px;
  }

  .blog-article__case-side {
    display: contents;
  }

  .blog-article__case-avatar-wrap {
    justify-items: start;
    grid-row: 3;
    grid-column: 1 / -1;
  }

  .blog-article__case-avatar {
    width: 48px;
    height: 48px;
  }

  .blog-article__case-author {
    grid-row: 4;
    grid-column: 1;
    max-width: none;
  }

  .blog-article__case-btn {
    grid-row: 4;
    grid-column: 2;
    align-self: center;
  }

  .blog-index__cases {
    margin-top: 28px;
  }

  .blog-index__cases .blog-article__cases-title {
    font-size: 22px;
  }

  .blog-index__cases .blog-article__cases-track {
    gap: 12px;
  }

  .blog-index__cases .blog-article__cases-controls {
    justify-content: center;
  }

  .blog-index__subscribe {
    margin-top: 28px;
    border-radius: 16px;
    background: #ffffff;
    color: #0f0f0f;
  }

  .blog-index__subscribe-overlay {
    padding: 28px 20px 32px;
    text-align: left;
  }

  .blog-index__subscribe::after {
    display: none;
  }

  .blog-index__subscribe-title {
    font-size: 24px;
  }

  .blog-index__subscribe-text {
    font-size: 12px;
    color: #5d5d5d;
    margin-left: 0;
  }

  .blog-index__subscribe-field {
    flex-direction: column;
    align-items: stretch;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #d6d6d6;
    padding-right: 0;
  }

  .blog-index__subscribe-field-label {
    color: #7a7a7a;
  }

  .blog-index__subscribe-input {
    color: #0f0f0f;
    font-size: 18px;
    padding: 32px 16px 16px;
  }

  .blog-index__subscribe-input::placeholder {
    color: #6b6b6b;
  }

  .blog-index__subscribe-btn {
    justify-content: center;
    width: 100%;
    border-radius: 10px;
    margin: 10px 0 0;
    padding: 20px 24px;
    font-size: 14px;
    align-self: stretch;
  }

  .blog-index__insights-controls--desktop {
    display: none;
  }

  .blog-index__insights-controls--mobile {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 16px;
    margin-top: 10px;
  }

  .blog-index__insights-progress {
    display: block;
    height: 2px;
  }

  .blog-index__insights-buttons {
    gap: 12px;
  }

  .blog-index__insights-btn {
    width: 70px;
    height: 44px;
  }

  .blog-index__topics-tabs,
  .blog-index__topics-grid {
    display: none;
  }

  .blog-index__topics-mobile {
    display: grid;
  }

  .blog-index__life-title {
    font-size: 22px;
  }

  .blog-index__life-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .blog-index__life-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
  }

  .blog-index__life-grid::-webkit-scrollbar {
    display: none;
  }

  .blog-index__life-card {
    min-height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 22px;
    scroll-snap-align: start;
  }

  .blog-index__life-title {
    font-size: 22px;
  }

  .blog-index__life-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .blog-index__life-card-title {
    font-size: 18px;
    line-height: 1.2;
  }

  .blog-index__life-card-footer {
    align-items: flex-end;
  }

  .blog-index__life-card-tag {
    font-size: 12px;
  }

  .blog-index__life-card-btn {
    padding: 4px 10px;
    font-size: 11px;
  }

  .blog-index__life-card-overlay {
    justify-content: flex-end;
    padding: 16px;
  }

  .blog-index__life-controls {
    width: 100%;
    justify-content: space-between;
    gap: 12px;
  }

  .blog-index__life-progress {
    display: block;
    height: 2px;
  }

  .blog-index__life-buttons {
    gap: 12px;
  }

  .blog-index__life-btn {
    width: 64px;
    height: 44px;
  }


  .blog-index__calc {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .blog-index__calc-title {
    font-size: 28px;
  }

  .blog-index__calc-subtitle {
    font-size: 15px;
  }

  .blog-index__calc-card {
    padding: 32px 26px 30px;
    border-radius: 14px;
  }

  .blog-index__calc-card-title {
    font-size: 15px;
  }

  .blog-index__calc-card-text {
    font-size: 13px;
  }

  .blog-index__calc-card-btn {
    justify-content: center;
    width: 100%;
    padding: 14px 18px;
    margin-top: 12px;
  }




}

@media (min-width: 641px) {
  .blog-index__insights-controls--desktop {
    display: flex;
  }

  .blog-index__insights-controls--mobile {
    display: none;
  }

  .blog-index__insights--feature .blog-index__insights-controls--desktop {
    display: none;
  }

  .blog-index__insights--feature .blog-index__insights-controls--bottom {
    display: flex;
  }

  .blog-index__insights--feature .blog-index__insights-track {
    grid-auto-columns: minmax(260px, 1fr);
  }

  .blog-index__insights-track {
    grid-auto-columns: minmax(240px, 1fr);
  }

  .blog-index__insights-card {
    aspect-ratio: auto;
  }
}