.herobanner-content {
  width:100%;
  display: grid;
}

.ibd--es input:not([type="checkbox"]):not([type="button"]):not([type="file"]):not([type="radio"]):focus,.ibd--es input:not([type="checkbox"]):not([type="button"]):not([type="file"]):not([type="radio"]):active {
  border: 1px solid #8abd37;
  outline: 0;
  color: #2c2c2c;
  box-shadow: none;
}



.custom-input__input #search-box-input {
  width: 100%;
  height: auto;
  border: none;
  outline: none;
  flex: 1 0 0;
  min-width: 0;
  margin: 0px;
  display: flex;
  width: 100%;
  font-family: var(--font-family-2-regular);
  font-size: var(--size-font-100);
  font-weight: inherit;
  line-height: var(--size-font-line-height-s);
  font-style: var(--font-style-normal);
  color: var(--Color-Form-Content-General);
  background-color: var(--Color-Form-Surface-Active);
  padding: var(--size-space-8) var(--size-space-16);
  border-radius: var(--border-radius-xl);
}

.herobanner-comunidades {
  display: flex;
  justify-self: center;
  width: var(--360-575-page-width, 360px);
  box-sizing: border-box;
  padding: var(--size-space-32, 32px) var(--360-575-page-margin, 16px);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--size-space-32, 32px);
}

.herobanner-comunidades__title-content-mobile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--size-space-16, 16px);
  align-self: stretch;
}

.herobanner-comunidades__title-content-desktop {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--size-space-16, 16px);
  align-self: stretch;
}

.herobanner-comunidades__title {
  margin: 0;
  color: var(--Color-Content-General-1, #2C2C2C);
  font-feature-settings: 'liga' off, 'clig' off;
}

.herobanner-comunidades__description {
  margin: 0;
  color: var(--Color-Content-General-1, #2C2C2C);
  font-feature-settings: 'liga' off, 'clig' off;
}

.herobanner-comunidades__image {
  width: 100%;
  height: 270px;
  object-fit: cover;
  border-radius: var(--border-radius-l, 16px);

}

.herobanner-comunidades__content {
  display: flex;
  flex-direction: column;
  gap: var(--size-space-40, 40px);
}

.herobanner-comunidades__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--size-space-16, 16px);
}

.herobanner-comunidades__item {
  margin: 0;
  padding-left: calc(24px + 8px);
  color: var(--Color-Content-General-1, #2C2C2C);
  font-feature-settings: 'liga' off, 'clig' off;
  position: relative;
}

.herobanner-comunidades__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2rem;
  min-width: 24px;
  width: 24px;
  height: 24px;
  background: url("/ibdmedia/Iconos y Pictogramas/Icon/Check-Accent 1.svg") no-repeat center center;
  background-size: contain;
}

.herobanner-comunidades__button {
  display: flex;
  width: 235px;
  height: 56px;
  box-sizing: content-box;
  padding: var(--border-radius-none, 0) var(--size-space-40, 40px);
  flex-direction: column;
  justify-content: center;
  align-self: center;
  align-items: center;
  gap: var(--border-radius-none, 0);
  text-decoration: none;
  border-radius: var(--border-radius-xl, 100px);
  background: var(--Color-Button-Background-Active-1, #2F6852);
  color: var(--Color-Button-Content-Active-1, #FFFAF6);
  text-align: center;
}

.herobanner-comunidades__button:hover {
  color: white;
}

@media (min-width: 576px) {
  .herobanner-comunidades {
    width: var(--576-767-page-width, 576px);
    padding: var(--size-space-32, 32px) var(--576-767-page-margin, 42px);
  }

}

@media (min-width: 768px) {
  .herobanner-comunidades {
    width: var(--768-991-page-width, 768px);
    padding: var(--size-space-32, 32px) var(--768-991-page-margin, 48px);
  }

}


@media (min-width: 992px) {
  .herobanner-comunidades {
    width: var(--992-1199-page-width, 992px);
    padding: var(--size-space-40, 40px) var(--992-1199-page-margin, 82px);
    flex-direction: row-reverse;
    gap: calc(24px + 16px);
  }

  .herobanner-comunidades__title-content-mobile {
    display: none;
  }

  .herobanner-comunidades__title-content-desktop {
    display: flex;
    gap: var(--size-space-24, 24px);
  }

  .herobanner-comunidades__content {
    flex: 1 0 0;
    justify-content: flex-start;
    gap: var(--size-space-40, 40px);
  }

  .herobanner-comunidades__content-desktop {
    display: flex;
    flex-direction: column;
    gap: var(--size-space-24, 24px);
  }

  .herobanner-comunidades__picture {
    width: 402px;
    flex: 1 0 0;
    padding-left: var(--size-space-8, 8px);
    box-sizing: border-box;
  }

  .herobanner-comunidades__image {
    width: 100%;
    height: 450px;
    object-fit: cover;
    border-radius: var(--border-radius-l, 16px);
  }

  .herobanner-comunidades__list {
    flex: 1 0 0;
  }

  .herobanner-comunidades__button {
    align-self: flex-start;
  }


}


@media (min-width: 1200px) {
  .herobanner-comunidades {
    width: var(--1200-1399-page-width, 1200px);
    padding: var(--size-space-40, 40px) var(--1200-1399-page-margin, 102px);
  }

}


@media (min-width: 1920px) {
  .herobanner-comunidades {
    width: var(--14001920-page-width, 1920px);
    padding: var(--size-space-40, 40px) var(--14001920-page-margin, 324px);
  }

}