.hello-card-section {
  .hello-card {
    display: grid;
    grid-template-columns: 1fr;
    position: relative;
    overflow: hidden;
    border-radius: var(--hc-border-radius, 18px);
    background-color: var(--hc-background-color, transparent);

    .hello-card__content-wrapper {
      position: relative;

      .hello-card__content {
        display: flex;
        flex-direction: column;
        justify-content: var(--hc-content-alignment, center);
        width: 100%;
        height: 100%;
      }
    }

    .hello-card__content--image {
      align-self: var(--hc-image-alignment, center);
    }

    .hello-card__content {
      & > :is(h1, h2, h3, h4, h5, h6, p) {
        margin: 0;
      }

      & > div:first-of-type {
        padding-top: 32px;

        @media screen and (min-width: 769px) {
          padding-top: 40px;
        }
      }

      & > div:last-of-type {
        padding-bottom: 32px;

        @media screen and (min-width: 769px) {
          padding-bottom: 40px;
        }
      }
    }

    .hello-card__content--text > *,
    .hello-card__content--image {
      padding-inline: 24px;

      @media screen and (min-width: 769px) {
        padding-inline: 72px;
      }
    }

    .hello-button__label {
      white-space: initial;
      word-break: break-word;
    }
  }

  .hello-card--horizontal {
    @media screen and (min-width: 769px) {
      grid-template-columns: var(--hc-col-size-1, 1fr) var(--hc-col-size-2, 1fr);
    }

    .hello-card__content-wrapper {
      background: var(--hc-text-background, transparent);
    }

    @media screen and (max-width: 768px) {
      /* mobile layout: text first */
      &:not(.hello-card-mobile--image-first) {
        .hello-card__content--image > div:first-of-type {
          padding-top: unset;
        }
      }

      /* mobile layout: image first */
      &.hello-card-mobile--image-first {
        .hello-card__content-wrapper {
          grid-row: 2;
        }
      }
    }

    @media screen and (min-width: 769px) {
      /* desktop layout: text first */
      .hello-card__content--image {
        padding-inline: 0 72px;
      }

      /* desktop layout: image first */
      &.hello-card--image-first {
        .hello-card__content-wrapper {
          grid-row: 1;
          grid-column: 2;
        }

        .hello-card__content--image {
          padding-inline: 72px 0;
        }
      }
    }

    /* text background: image */
    .hello-card__content-wrapper--bg-image {
      .hello-card__content {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
      }

      .hello-card__content-background {
        object-fit: cover;
        width: 100%;
        height: 100%;

        picture img {
          display: block;
        }
      }
    }
  }

  .hello-card__icon {
    padding-top: var(--hc-icon-pt, 0);
    text-align: var(--hc-icon-alignment, center);

    img {
      height: var(--hc-icon-height-mobile, 14px);
      width: auto;

      @media screen and (min-width: 769px) {
        height: var(--hc-icon-height, 17px);
      }
    }
  }
}