/* CSS Document */

/* =============================
   RESPONSIVE
============================= */

@media (max-width: 768px) {

  .layout {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #ddd;
  }

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

  .content {
    background-image: url("../images/clouds-mobile.webp");
  }

  .alphabet-nav {
    display: none;
  }

  .alphabet-bar::after {
    content: "Abécédaire";
    font-family: 'Merriweather', serif;
    font-weight: 600;
  }

  .index-list {
    column-count: 1;
  }
  
 

}