.cr-ct-image {
  padding: 8px;
  border-radius: 0;
  position: relative;

  &--disable-paddings {
    padding: 0 !important;
  }

  &--border-not-centered {
    padding: 0 8px 8px 0;
  }

  &--rounded {
    border-radius: 50%;
    overflow: hidden;
  }

  &__overlay {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border-radius: inherit;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
    cursor: pointer;
    z-index: 60;
  }

  &__description {
    color: #FFF !important;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px;
    text-transform: capitalize;
    margin-bottom: 40px;
  }

  &__border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    border: 1px solid @theme-secondary-base-color;
    transition: opacity 0.3s ease-in-out;
    z-index: 50;
    background: transparent;

    &--border-not-centered {
      top: 8px;
      left: 8px;
    }
  }

  &__img {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 50;
  }

  &--theme-1 {
    .cr-ct-image__border {
      border: 1px solid @theme-1-color-10;
    }
  }

  &--theme-2 {
    .cr-ct-image__border {
      border: 1px solid @theme-2-color-10;
    }
  }

  &--theme-3 {
    .cr-ct-image__border {
      border: 1px solid @theme-3-color-10;
    }
  }

  &--theme-4 {
    .cr-ct-image__border {
      border: 1px solid @theme-4-color-10;
    }
  }

  &--theme-5 {
    .cr-ct-image__border {
      border: 1px solid @theme-5-color-10;
    }
  }

  &--theme-6 {
    .cr-ct-image__border {
      border: 1px solid @theme-6-color-10;
    }
  }

  &--font-variant-1 {
    .cr-ct-image__description {
      font-family: @theme-font-variants[@variant-1][body-font-family];
    }
  }

  &--font-variant-2 {
    .cr-ct-image__description {
      font-family: @theme-font-variants[@variant-2][body-font-family];
    }
  }

  &--font-variant-3 {
    .cr-ct-image__description {
      font-family: @theme-font-variants[@variant-3][body-font-family];
    }
  }
}