.bs-product-mosaic {
  --bs-pm-gap: 10px;
  --bs-pm-radius: 6px;
}

.bs-product-mosaic .bs-pm-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bs-pm-gap);
}

/* >= 400px: 2 sloupce */
@media (min-width: 400px) {
  .bs-product-mosaic .bs-pm-grid{
    grid-template-columns: 1fr 1fr;
  }
}

/* >= 900px: 3 sloupce (2 velké + 2 malé vpravo) */
@media (min-width: 900px) {
  .bs-product-mosaic .bs-pm-grid{
    grid-template-columns: 2fr 2fr 1fr;
    column-gap: var(--bs-pm-gap);
    row-gap: var(--bs-pm-gap); /* mezera mezi pravými dlaždicemi; velké dlaždice budou o něco vyšší než čtverec */
    align-items: stretch;
  }

  .bs-product-mosaic .bs-pm-slot-a{ grid-column: 1; grid-row: 1 / span 2; }
  .bs-product-mosaic .bs-pm-slot-b{ grid-column: 2; grid-row: 1 / span 2; }
  .bs-product-mosaic .bs-pm-slot-c{ grid-column: 3; grid-row: 1; }
  .bs-product-mosaic .bs-pm-slot-d{ grid-column: 3; grid-row: 2; }
}

.bs-product-mosaic .bs-pm-item{
  position: relative;
  overflow: hidden;
  border-radius: var(--bs-pm-radius);
  background: #111;
}

@media (min-width: 900px) {
  /* malé dlaždice musí být čtverec -> určí výšku řádků a tím i výšku velkých dlaždic */
  .bs-product-mosaic .bs-pm-slot-c,
  .bs-product-mosaic .bs-pm-slot-d{
    aspect-ratio: 1 / 1;
  }
}

/* na menších šířkách necháme všechny karty čtvercové */
@media (max-width: 899.98px) {
  .bs-product-mosaic .bs-pm-item{
    aspect-ratio: 1 / 1;
  }
}

.bs-product-mosaic .bs-pm-link{
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
  position: relative;
}

.bs-product-mosaic .bs-pm-media{
  position: absolute;
  inset: 0;
}

.bs-product-mosaic .bs-pm-img,
.bs-product-mosaic .bs-pm-noimg{
  width: 100%;
  height: 100%;
  display: block;
}

.bs-product-mosaic .bs-pm-img{
  object-fit: cover;
  transform: scale(1);
  transition: transform .25s ease;
}

.bs-product-mosaic .bs-pm-link:hover .bs-pm-img{
  transform: scale(1.03);
}

.bs-product-mosaic .bs-pm-noimg{
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.02));
}

.bs-product-mosaic .bs-pm-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 12px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .65) 100%);
pointer-events: none;
}

.bs-product-mosaic .bs-pm-badge{
  pointer-events: none;
  align-self: flex-start;
  margin-bottom: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  background: rgba(255,255,255,.92);
  color: #111;
  font-weight: 600;
}

.bs-product-mosaic .bs-pm-title{
  font-weight: 700;
  font-size: 2em;
  line-height: 1.1;
  color: #f07c00;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}


.bs-product-mosaic .bs-pm-price{
  margin-bottom: 6px;
  font-size: .857em;
  color: #fff;
  text-shadow: 1px 1px 1px black;
}


.bs-product-mosaic .bs-pm-price del{
  opacity: .75;
}
.bs-product-mosaic .bs-pm-price ins{
  text-decoration: none;
}

/* Placeholder pro editor */
.bs-product-mosaic .bs-pm-item.is-empty{
  background: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,.08),
    rgba(255,255,255,.08) 10px,
    rgba(255,255,255,.03) 10px,
    rgba(255,255,255,.03) 20px
  );
  border: 1px dashed rgba(255,255,255,.25);
}

.bs-product-mosaic .bs-pm-placeholder{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 14px;
  color: rgba(255,255,255,.9);
  text-align: center;
}

.bs-product-mosaic .bs-pm-ph-title{
  font-weight: 700;
  margin-bottom: 6px;
}

.bs-product-mosaic .bs-pm-ph-sub{
  font-size: 12px;
  opacity: .9;
}

@media (min-width: 900px) {
  .bs-product-mosaic .bs-pm-slot-c .bs-pm-title,
  .bs-product-mosaic .bs-pm-slot-d .bs-pm-title{
    font-size: 1.4em;
  }
}