/* ------------------------------ ... ------------------------------ */

.page-custom-content {
  width: 100%;
}

/* ------------------------------ Components ------------------------------ */

/* ----- Big Boi ----- */
.custom-big-boi {
  display: flex;
  width: 100%;
  min-height: 400px;
  background-position: center right;
  background-repeat: no-repeat;
  background-size: cover;
}

/* ----- Product Group ----- */
.custom-product-group {
  --cpg-columns-target: 1; /* Target number of columns. */
  --cpg-columns-max: 4; /* Maximum number of columns (1-4). Set in page builder. */
  --cpg-columns: calc(min(var(--cpg-columns-target), var(--cpg-columns-max))); /* Current number of columns. */
  display: grid;
  grid-template-columns: repeat(var(--cpg-columns), minmax(0, 1fr));
}
@media (min-width: 640px) {
  .custom-product-group {
    --cpg-columns-target: 2;
  }
}
@media (min-width: 768px) {
  .custom-product-group {
    --cpg-columns-target: 3;
  }
}
@media (min-width: 1280px) {
  .custom-product-group {
    --cpg-columns-target: 4;
  }
}

/* ------------------------------ GrapesJS ------------------------------ */

.gjs-frame {
  outline: medium none;
  height: 100%;
  width: 100%;
  border: none;
  margin: auto;
  display: block;
  transition: width .35s ease, height .35s ease;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0
}

/* ------------------------------ ... ------------------------------ */