.ebp-custom-project-header-1-inner {
  background-color: var(--slate);
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.ebp-custom-project-header-1-images p {
  margin-block-end: 0 !important;
}

.ebp-custom-project-header-1-images {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 9;
  gap: 3rem;
}

.ebp-custom-project-header-1-inner h1 {
  position: relative;
  z-index: 1;
}

.ebp-custom-project-header-1-inner h1:before,
.ebp-custom-project-header-1-inner h1:after {
  content: '';
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--slate);
}

.ebp-custom-project-header-1 .wrapper {
  position: static;
}

.ebp-custom-project-header-1-inner h1:after {
  right: -100%;
}

.ebp-custom-project-header-1-inner h1:before {
  left: -100%;
}

.ebp-custom-project-header-1-inner:after {
  content: '';
  position: absolute;
  top: 100%;
  left: -4rem;
  width: calc(100% + 8rem);
  height: 110px;
  background-color: var(--slate);
}

/* triangle */
.bottom-triangle {
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0px 100vw 150px 0px;
  border-color: transparent transparent var(--slate) transparent;
  transform: rotate(0deg);
}

.top-triangle {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 100px 0px 0px 65vw;
  border-color: var(--slate) transparent transparent transparent;
  transform: rotate(0deg);
}

.single-project .ebp-custom-project-header-1 {
  position: relative;
}
.single-project .ebp-custom-project-header-1:before {
  content: '';
  position: absolute;
  top: -130px;
  left: 0;
  width: 100%;
  height: 130px;
  background-color: var(--slate);
}

@media (max-width: 1024px) {
  .ebp-custom-project-header-1-inner,
  .ebp-custom-project-header-1-images {
    flex-direction: column;
    gap: var(--spacing-2);
    width: 100%;
    align-items: flex-start;
  }
}