/*
  promocard, iconcards
  audience card, textaccordion
  text cards
  text slider
*/

/* promocard, iconcards
============================================================================ */

.bg-promocard,
.bg-iconcards {
  position: relative;
}

.bg-promocard .promocard-bg-img,
.bg-iconcards .iconcards-bg-img {
  position: absolute;
  top: 0;
  left: -10%;
  object-fit: cover;
  pointer-events: none;
}

@media (max-width: 768px) {

  .bg-promocard .promocard-bg-img,
  .bg-iconcards .iconcards-bg-img {
    top: 0;
    left: 0;
    height: 100%;
  }
}

/* audience card, textaccordion
============================================================================ */

.bg-audience,
.bg-textaccordion {
  position: relative;
  overflow-x: clip;
}

.bg-audience .audience-bg-img,
.bg-textaccordion .textaccordion-bg-img {
  position: absolute;
  top: 20%;
  right: -10%;
  max-width: none;
  object-fit: cover;
  transform: rotate(180deg);
  pointer-events: none;
}

.bg-iconcards .iconcards-bg-img2 {
  position: absolute;
  top: 20%;
  right: 0;
  max-width: none;
  object-fit: cover;
  transform: rotate(90deg);
  pointer-events: none;
}

.bg-textaccordion .textaccordion-bg-img-left {
  position: absolute;
  top: -40%;
  left: -20%;
  object-fit: cover;
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 768px) {

  .bg-audience .audience-bg-img,
  .bg-textaccordion .textaccordion-bg-img {
    top: 0%;
    width: 100%;
    right: auto;
    left: 0;
    height: 100%;
  }

  .bg-iconcards .iconcards-bg-img2 {
    top: 0%;
    width: 100%;
    right: auto;
    left: 0;
    height: 100%;
    background-color: var(--pos-color-page-background);
    transform: rotate(180deg);
  }

  .bg-textaccordion .textaccordion-bg-img-left {
    top: 20%;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

/* text cards
============================================================================ */

.bg-textcards {
  position: relative;
  overflow: clip;
}

.bg-textcards .textcards-bg-img {
  position: absolute;
  top: 26%;
  left: 80%;
  width: 60%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

@media (max-width: 768px) {
  .bg-textcards .textcards-bg-img {
    top: 29%;
    left: 50%;
    height: 36%;
  }
}

/* text slider
============================================================================ */

.bg-textslider {
  position: relative;
  overflow-x: clip;
}

.bg-textslider .textslider-bg-img {
  position: absolute;
  bottom: -38%;
  right: -34%;
  width: 60%;
  /* height: 1400px; */
  object-fit: cover;
  pointer-events: none;
}

@media (max-width: 1920px) {
  .bg-textslider .textslider-bg-img {
    width: 75%;
  }
}

@media (max-width: 1440px) {
  .bg-textslider .textslider-bg-img {
    display: none;
  }
}



/* ctas
============================================================================ */
#start-building {
  background-image: var(--image-start-building);
  background-image: image-set(
    var(--image-start-building) 1x,
    var(--image-start-building-2x) 2x
  );
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: contain;
}

@media (min-width: 1656px) {
  #start-building {
    background-image: var(--image-start-building-2x);
  }
}