.iconbox {
  background-color: $quaternary-color;
  border: none;

  .icon {
    .icon-image {
      background: red;
    }
  }

  .box-content {
    color: $primary-color;

    .iconbox-headline {
      letter-spacing: normal;
      font-weight: 800;
      font-size: 22px;

      @include media-breakpoint-down(sm) {
        font-size: 20px;
      }
    }

    .iconbox-content {
      letter-spacing: normal;
      font-weight: normal;
      font-size: 16px;
    }
  }
}

.feature-items .iconbox {
  background-color: $tertiary-color;
  border: 3px solid $secondary-color;
}

.feature-items .iconbox-link-wrapper:hover .iconbox {
  background-color: $tertiary-color;

  * {

    color: $quaternary-bg;
  }
}

@include media-breakpoint-down(lg) {}

@include media-breakpoint-down(md) {
  .container .row.feature-items {
    --bs-gutter-x: 0rem;
  }

  .feature-items {
    margin-top: -100px;

    .container.fourcol-25-25-25-25 {
      padding-right: var(--bs-gutter-x, 0.75rem) !important;
      padding-left: var(--bs-gutter-x, 0.75rem) !important;
    }

    section.section-bg-color {
      .container {
        --bs-gutter-x: 16px;
      }
    }
  }

  .container-fluid .feature-items {
    .container.fourcol-25-25-25-25 {
      --bs-gutter-x: 14px;
      padding-left: var(--bs-gutter-x, 0.75rem) !important;
      padding-right: var(--bs-gutter-x, 0.75rem) !important;
    }
  }
}