/**
* @description Iterates over the $space-gap values and creates a class for each one.
* @param {list} $space-gap - A list of space gap values.
*/
.gap-8 {
  gap: 8px;
}

.gap-16 {
  gap: 16px;
}

.gap-24 {
  gap: 24px;
}

.layout-column-content-color-container {
  height: 100%;
  position: absolute;
  width: 100%;
}

.color-content {
  height: 100%;
  width: 100%;
}

.layout-column-content-image-container {
  height: 100%;
  position: absolute;
  width: 100%;
}

.layout-column-content-container {
  height: 100%;
  position: absolute;
  width: 100%;
}

.layout-column-content-wrapper {
  min-height: 200px;
  position: relative;
}
@media (min-width: 769px) {
  .layout-column-content-wrapper {
    min-height: 350px;
  }
}
@media (min-width: 1024px) {
  .layout-column-content-wrapper {
    min-height: 500px;
  }
}
@media (min-width: 1440px) {
  .layout-column-content-wrapper {
    min-height: 500px;
  }
}
@media (min-width: 1600px) {
  .layout-column-content-wrapper {
    min-height: 500px;
  }
}

.image-phone {
  background-color: var(--background-primary);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  min-height: 500px;
  position: relative;
}
@media (min-width: 769px) {
  .image-phone {
    display: none;
  }
}
@media (min-width: 1024px) {
  .image-phone {
    display: none;
  }
}
@media (min-width: 1440px) {
  .image-phone {
    display: none;
  }
}
@media (min-width: 1600px) {
  .image-phone {
    display: none;
  }
}

.image-tablet {
  background-color: var(--background-primary);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: none;
  min-height: 500px;
  position: relative;
}
@media (min-width: 769px) {
  .image-tablet {
    display: block;
  }
}
@media (min-width: 1024px) {
  .image-tablet {
    display: none;
  }
}
@media (min-width: 1440px) {
  .image-tablet {
    display: none;
  }
}
@media (min-width: 1600px) {
  .image-tablet {
    display: none;
  }
}

.image-desktop {
  background-color: var(--background-primary);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: none;
  min-height: 500px;
  position: relative;
}
@media (min-width: 769px) {
  .image-desktop {
    display: none;
  }
}
@media (min-width: 1024px) {
  .image-desktop {
    display: block;
  }
}
@media (min-width: 1440px) {
  .image-desktop {
    display: block;
  }
}
@media (min-width: 1600px) {
  .image-desktop {
    display: block;
  }
}

.layout-column-content-wrapper {
  min-height: var(--min-height-mobile);
  position: relative;
}
@media (min-width: 769px) {
  .layout-column-content-wrapper {
    min-height: var(--min-height-tablet);
  }
}
@media (min-width: 1024px) {
  .layout-column-content-wrapper {
    min-height: var(--min-height-desktop);
  }
}

/*# sourceMappingURL=layoutColumnContent.css.map*/