/* CATALOGUE LISTING */
/* ================ */

.catalogue-listing-card {margin-bottom: 1.5rem;}
.catalogue-listing-card-image img {display: block;}

@media only screen and (min-width: 601px) {
  .masonry-grid {
    display: grid;
    grid-gap: 1.5rem;
    grid-auto-rows: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }

  .masonry-grid>* {
    display: flex;
    flex-direction: column;
  }

  .masonry-grid.m6-masonry {
    grid-template-columns: repeat(auto-fill, minmax(calc(50% - 1.5rem), 1fr));
  }

  .masonry-grid.m4-masonry {
    grid-template-columns: repeat(auto-fill, minmax(calc(33.333% - (1.5rem * 2)), 1fr));
  }
}

@media only screen and (min-width: 993px) {
  .masonry-grid.l4-masonry {
    grid-template-columns: repeat(auto-fill, minmax(calc(33.333% - (1.5rem * 2)), 1fr));
  }

  .masonry-grid.l3-masonry {
    grid-template-columns: repeat(auto-fill, minmax(calc(25% - (1.5rem * 2)), 1fr));
  }
}

.alphabet-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 20px 0;
}

.alphabet-filter a {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  color: #555;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

.alphabet-filter a:hover {
  background-color: #f5f5f5;
  border-color: #999;
  color: #000;
}

.alphabet-filter a.active {
  background-color: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
  font-weight: bold;
}


/* CATALOGUE DÉTAIL */
/* ================ */

.catalogue-detail a.lightbox,
.catalogue-detail a.lightbox img {
  display: block;
  width: 100%;
  height: auto;
}
.catalogue-detail a.lightbox {margin-bottom: 1.5rem;}

.catalogue-detail-images-container .col:first-child {
  width: 100%;
  margin-left: 0;
  left: auto;
  right: auto;
  flex-grow: 0;
  flex-basis: 100%;
}    
.catalogue-detail-images-container .col:not(:first-child) {width: 33.333333333333333%;}     

@media screen and (min-width:993px) {
  .catalogue-detail-images-container {
    position: sticky;
    top: 1rem;
    transition: all .3s;
  }
}