/**
 * For the full copyright and license information, please view the
 * docs/licenses/LICENSE.txt file that was distributed with this source code.
 */
.showcase-card,
.helper-card {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  max-width: 810px;
  margin: auto;
  margin-bottom: var(--#{$cdk}size-16);
  box-shadow: var(--#{$cdk}box-shadow-md);

  &__left,
  &__right {
    display: inline-block;
    height: 100%;
    text-align: center;
    vertical-align: top;
  }

  &__left {
    width: 320px;
    animation: showcase-img-appearance 1s;

    @include media-breakpoint-down(md) {
      display: none;
    }

    img {
      width: 100%;
      padding: var(--#{$cdk}size-32) var(--#{$cdk}size-24);
      animation: showcase-img-appearance 1.5s;
    }

    &.shape-one {
      background-repeat: no-repeat;
      background-size: contain;
    }
  }

  &__right {
    width: 490px;
    padding: var(--#{$cdk}size-32) var(--#{$cdk}size-52) var(--#{$cdk}size-32) var(--#{$cdk}size-24);
    font-size: var(--#{$cdk}size-14);

    @include media-breakpoint-down(md) {
      padding: var(--#{$cdk}size-52) var(--#{$cdk}size-20);
    }

    h2 {
      font-family: "Open Sans", Arial, Helvetica, sans-serif;
      font-size: var(--#{$cdk}size-18);
      font-weight: 600;
      color: var(--#{$cdk}primary-800);
    }

    p {
      margin: var(--#{$cdk}size-20) 0;
      text-align: left;
    }

    > a {
      margin-inline: var(--#{$cdk}size-4);
    }

    button {
      padding: var(--#{$cdk}size-8) var(--#{$cdk}size-16);
      font-weight: 600;
      color: var(--#{$cdk}primary-800);
      background-color: var(--#{$cdk}white);
      border: 1px solid var(--#{$cdk}primary-400);
      outline: 0;
    }

    @include media-breakpoint-down(md) {
      width: inherit;
      text-align: center;
    }
  }

  &__close {
    position: absolute;
    top: var(--#{$cdk}size-20);
    right: var(--#{$cdk}size-20);
    cursor: pointer;
  }
}

.showcase-list-card {
  &__header {
    font-size: var(--#{$cdk}size-20);
    font-weight: 600;
    color: var(--#{$cdk}primary-800);
  }

  &__message {
    max-width: 540px;
    font-size: var(--#{$cdk}size-14);
    color: var(--#{$cdk}primary-600);
  }
}
