/**
 *
 * Breakpoints
 *
 */
.product-mosaic-section {
  width: 100%;
  padding-block: 3rem;
  overflow: hidden;
  background: var(--color-white);
}
@media (min-width: 64em) {
  .product-mosaic-section {
    max-height: 595px;
    padding-block: 0;
  }
  .product-mosaic-section .wrap-small {
    height: 100%;
  }
  .product-mosaic-section .grid {
    width: 100%;
  }
}

@media (min-width: 64em) {
  .product-mosaic-content {
    margin-inline-start: -2rem;
    padding-inline-end: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
  }
}
@media (min-width: 80em) {
  .product-mosaic-content {
    padding-inline-end: 0;
  }
}
.product-mosaic-content .product-mosaic-image {
  margin-block-end: 1.5rem;
}
@media (min-width: 64em) {
  .product-mosaic-content .product-mosaic-image {
    margin-block-end: 2rem;
  }
}
.product-mosaic-content h3 {
  margin-block-end: 1.5rem;
}
@media (min-width: 64em) {
  .product-mosaic-content h3 {
    margin-block-end: 1rem;
  }
}
.product-mosaic-content p {
  margin-block-end: 1.5rem;
}
@media (min-width: 64em) {
  .product-mosaic-content p {
    margin-block-end: 2rem;
  }
}
.product-mosaic-content .button {
  width: 100%;
}
@media (min-width: 48em) {
  .product-mosaic-content .button {
    width: -moz-fit-content;
    width: fit-content;
  }
}

.product-mosaic-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
@media (min-width: 48em) {
  .product-mosaic-grid {
    gap: 1.5rem;
  }
}
@media (min-width: 64em) {
  .product-mosaic-grid {
    flex-direction: row;
    justify-content: flex-end;
    margin-inline-end: -2rem;
    gap: 1.5rem;
    height: 100%;
    max-height: 595px;
  }
}

.product-mosaic {
  display: flex;
  gap: 1rem;
  margin-inline-start: -21px;
}
@media (min-width: 48em) {
  .product-mosaic {
    gap: 1.5rem;
  }
}
@media (min-width: 64em) {
  .product-mosaic {
    flex-direction: column;
    margin-inline-start: 0;
    margin-block-start: -85px;
    flex-shrink: 0;
  }
}
.product-mosaic:last-child {
  margin-inline-start: 0;
}
@media (min-width: 64em) {
  .product-mosaic:last-child {
    margin-block-start: -160px;
  }
}

.product-mosaic-item {
  width: 6rem;
  height: 6rem;
  flex-shrink: 0;
}
.product-mosaic-item.beiege {
  background: var(--color-beige);
}
.product-mosaic-item.black {
  background: var(--color-black);
}
.product-mosaic-item.blue {
  background: var(--color-blue-light);
}
.product-mosaic-item.light {
  background: var(--color-slate-primary);
}
@media (min-width: 550px) {
  .product-mosaic-item {
    width: 7rem;
    height: 7rem;
  }
}
@media (min-width: 640px) {
  .product-mosaic-item {
    width: 9rem;
    height: 9rem;
  }
}
@media (min-width: 48em) {
  .product-mosaic-item {
    width: 11.5rem;
    height: 11.5rem;
  }
}
@media (min-width: 64em) {
  .product-mosaic-item {
    width: 12rem;
    height: 12rem;
  }
}
/*# sourceMappingURL=product-mosaic.css.map */