@import "../../../src/scss/init";

:root {
  --carousel-item-text-align: center;
  --carousel-item-media-icon-height: 100px;
  --carousel-item-media-icon-height-mobile: 100px;
}

.d-p-carousel-item {
  --block-spacer-s: 0;
  --block-spacer-m: 0;
  --block-spacer-l: 0;
  --block-spacer-xl: 0;

  position: relative;
  text-align: var(--carousel-item-text-align);


  .body-text {
    color: var(--carousel-body-text-color);
  }

  &[data-has-link]:hover {
    .body-text {
      color: var(--carousel-body-text-color-hover);
    }
  }

  &__content {
    padding-top: 0;
    padding-bottom: 0;
    padding-inline: 10%;

    @include media-breakpoint-up(md) {
      padding-inline: var(--content-spacer-xxml);
      margin: auto;
    }
  }

  .media-icon {
    height: var(--carousel-item-media-icon-height-mobile);
    margin-bottom: 1rem;

    img {
      max-height: var(--carousel-item-media-icon-height-mobile);
      width: auto;
      height: auto;
      margin-inline: auto;
    }

    @include media-breakpoint-up(md) {
      height: var(--carousel-item-media-icon-height);

      img {
        max-height: var(--carousel-item-media-icon-height);
      }
    }
  }

  .heading {
    @include heading(5);
    color: var(--heading-color);
  }

  &__link {
    @include filling-absolute;
  }
}
