/**
 * Module HomeImageBlock
 *
 * @author    Empty
 * @copyright 2007-2020 PrestaShop SA
 * @license   http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */

#container-homeimageblock {
  all: unset;
  width: 100%;
  padding: 40px 0;
  background-color: #2a2a2a;
  box-sizing: border-box;
  display: block;
}

#inner-wrapper.container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#homeimageblock {
  margin: 0 auto;
}

#homeimageblock li {
  list-style-type: none;
  position: relative;
}

#homeimageblock li img {
  height: auto !important;
  max-width: 100%;
}

#homeimageblock li div {
  background: #fff;
  bottom: 0;
  color: #000;
  font-size: 15px;
  margin: 0;
  padding: 5px 10px 6px;
  position: absolute;
  width: 100%;
}

/* ==== ITEM Masonry responsive ==== */
#homeimageblock .item {
  width: 300px;
  margin-bottom: 10px;
  box-sizing: border-box;
}

@media (max-width: 1024px) {
  #homeimageblock .item {
    width: 250px;
  }
}

@media (max-width: 768px) {
  #homeimageblock .item {
    width: 200px;
  }
}

@media (max-width: 480px) {
  #homeimageblock .item {
    width: 100%;
  }
}

/* Fallback CSS cuando Masonry no está disponible */
#homeimageblock.masonry-fallback {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#homeimageblock.masonry-fallback .item {
  margin: 5px;
}

/* Centrado por defecto */
#homeimageblock {
  margin: 0 auto;
}

/* En pantallas medianas (tablets), que use más ancho */
@media (max-width: 1200px) {
  #homeimageblock {
    max-width: 900px; /* en lugar de dejarlo en 740px */
  }
}

@media (max-width: 1024px) {
  #homeimageblock .item {
    width: 280px;
  }

  #homeimageblock {
    max-width: 880px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  #homeimageblock {
    max-width: 680px;
  }
}

@media (max-width: 480px) {
  #homeimageblock {
    max-width: 100%;
    padding: 0 10px;
  }
}