.et-widget-subcategories {

  .et-sub-categories-wrapper {
    justify-content: center; // fallback value if setting is not set or setting class is not available
    &.et-align-horizontal-center {
      justify-content: center;
    }
    &.et-align-horizontal-left {
      justify-content: flex-start;
    }
    &.et-align-horizontal-right {
      justify-content: flex-end;
    }
    & > col {
      @include media-breakpoint-up(md) {
        max-width: 50%;
      }
    }
  }
  .et-sub-category {
    display: flex;
    flex-direction: column;
    word-break: break-word;
    hyphens: auto;
    margin-bottom: $grid-gutter-width;
  }
  .et-sub-category-link-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .et-sub-category-title:not(.et-subcategory-title-no-image):not(.et-subcategory-title-below-image) {
    margin-bottom: 0;
  }
  .et-sub-category-description {
    margin-top: 5px;
    font-size: small;
  }

  .et-sub-category-title {
    width: 100%;
  }
  .et-align-title-left {
    .et-sub-category-title {
      text-align: left;
    }
  }
  .et-align-title-center {
    .et-sub-category-title {
      text-align: center;
    }
  }
  .et-align-title-right {
    .et-sub-category-title {
      text-align: right;
    }
  }

  .et-sub-categories-compact {
    .et-sub-category-image {
      margin-right: 10px;
      border-radius: $border-radius;
      overflow: hidden;
      min-width: 40px;
      max-width: 40px;
    }
    .et-sub-category-link-wrapper {
      align-items: flex-start;
    }
  }
  .et-sub-categories-large {
    .et-sub-category-image {
      position: relative;
      width: 100%;
      height: 100%;
      img {
        width: 100%;
        height: auto;
        object-fit: cover;
      }
    }
    .et-sub-category-positioner {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 0;
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }
    .et-sub-category-backdrop {
      color: color-yiq($colorBackdrop);
      background-color: $colorBackdrop;
      border-radius: $border-radius;
      padding: 8px 10px;
      width: 100%;
      hyphens: auto;
    }
  }
  .et-sub-categories-largeTitleBelowImage {
    .et-sub-category-image {
      position: relative;
      width: 100%;
      height: 100%;
      img {
        width: 100%;
        height: auto;
        object-fit: cover;
      }
    }
    .et-sub-category-positioner {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .et-sub-category-backdrop {
      padding: 8px 0 0 0;
      width: 100%;
      hyphens: auto;
    }
  }
}