:host(us-intro-screen) {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--color-neutral-0);

  .introscreen {
    display: flex;
    flex-direction: column;
    height: 100%;

    &-wrapper {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    &-body {
      display: flex;
      justify-content: center;
      flex: auto;
      height: 100%;
      padding: var(--space-inline-xl) var(--space-inline-xl) var(--space-outer-s) var(--space-inline-xl);

      .carousel-item {
        display: flex;
        flex-direction: column;
        cursor: grab;
  
        .slide-screen {
          display: flex;
          justify-content: center;

            slot::slotted(*) {
            display: flex;
            justify-content: center;
            width: 100%;
            height: fit-content;
          }
        }

        .title-and-descripton-wrapper {
          display: flex;
          flex-direction: column;
          margin-bottom: var(--space-inner-xl);

          .title {
            margin-bottom: var(--space-inner-m);
            color: var(--color-neutral-1000);
            font: var(--text-headline-h3);
          }

          .descripton {
            color: var(--color-neutral-900);
            font: var(--text-p-l);
            overflow: hidden;
          }
        }
      }
    }
  }

  .vertical {
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;

    .carousel-item {
      .slide-screen {
        width: 344px;
        height: 220px;
        margin-bottom: 40px;
      }
      
      .title-and-descripton-wrapper {
        .descripton {
          max-height: 144px;
        }
      }
    }

    .introscreen__footer {
      .policy-element {
        margin-top: var(--space-inline-l);
      }
    }
  }

  .vertical-narrow {
    .carousel-item {
      .slide-screen {
        width: 280px;
      }
    }
  }

  .horizontal-small,
  .horizontal-medium,
  .horizontal-large {
    .carousel-item {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      flex-direction: row;

      .slide-screen {
        margin-right: var(--space-outer-s);
      }
      
      .title-and-descripton-wrapper {
        flex: 1;

        .title {
          text-align: left;
          color: var(--color-neutral-1000);
          font: var(--text-headline-h3);
        }

        .descripton {
          text-align: left;
          color: var(--color-neutral-900);
          font: var(--text-p-l);
        }
      }
    }
  }

  .horizontal-small {
    .carousel-item {
      .slide-screen {
        width: 236px;
        height: 224px;
      }
      
      .title-and-descripton-wrapper {
        .descripton {
          max-height: 165px;
        }
      }
    }
  }

  .horizontal-medium {
    .introscreen-body {
      padding-top: var(--space-outer-s);

      .carousel-item {
        .slide-screen {
          width: 336px;
          height: 244px;
        }
  
        .title-and-descripton-wrapper {
          .descripton {
            max-height: 165px;
          }
        }
      }
    }
  }

  .horizontal-large {
    .introscreen-body {
      padding-top: var(--space-outer-s);

      .carousel-item {
        .slide-screen {
          width: 456px;
          height: 252px;

          slot::slotted(*) {
            height: unset;
          }
        }

        .title-and-descripton-wrapper {
          .descripton {
            max-height: 212px;
          }
        }
      }
    }
  }

  .big-format {
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;

    .introscreen-body {
      padding-top: var(--space-inner-xl);

      .carousel-item {
        flex-direction: column;
        align-items: center;
  
        .slide-screen {
          flex-direction: column;
          max-width: 390px;
          width: 100%;
          height: 247px;
          margin-bottom: 42px;
          margin-right: 0;
        }
      
        .title-and-descripton-wrapper {
          margin-bottom: var(--space-outer-m);

          .title,
          .descripton {
            text-align: center;
          }
          
          .descripton {
            max-height: 144px;
          }
        }
      }
    }
  }
}