.hello-card-section {
  background-image: var(--section-bg-image-mobile);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position-x: center;

  @media screen and (min-width: 769px) {
    background-image: var(--section-bg-image);
    background-size: auto 100%;
  }

  .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);

    &.has-masking {
      &::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 8px;
        bottom: 8px;
        right: 8px;
        border-radius: 10px;
        background: white;
        filter: blur(6px);
      }
    }

    .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 {
      h1, h2, h3, h4, h5, h6, p {
        margin: 0;
      }

      &:not(.has-ordering) {
        & > 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;
          }
        }
      }

      &.has-ordering {
        .hello-card__first {
          padding-top: 32px;

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

        .hello-card__last {
          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;
    }
  }

  .has-background {
    position: relative;

    .hello-card {
      position: absolute;
      top: 0;
      left: 1.5rem;
      z-index: 1;
      width: calc(100% - 3rem);
      background-color: transparent;

      @media screen and (min-width: 750px) {
        left: 5rem;
        width: calc(100% - 10rem);
      }
    }
  }

  .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: 3;
        }
      }
    }

    @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: 2;
          grid-column: 2;
        }

        .hello-card__content--image {
          grid-row: 2;
          grid-column: 1;
          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%;
      }
    }
  }

  .hello-card__heading-wrapper {
    display: flex;
    flex-direction: var(--hc-heading-direction, row);
    align-items: var(--hc-heading-alignment, flex-start);
    gap: var(--hc-heading-gap, 0);
    padding-top: var(--hc-heading-pt, 0);

    &.hello-card__heading-wrapper--full-row {
      padding-top: 32px;

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

  .hello-card__description-wrapper {
    display: flex;
    flex-direction: var(--hc-description-direction, row);
    align-items: var(--hc-description-alignment, flex-start);
    gap: var(--hc-description-gap, 0);
    padding-top: var(--hc-description-pt, 0);

    @media screen and (max-width: 768px) {
      flex-wrap: wrap;

      &.hello-card__description-wrapper--row {
        .hello-card__description-item {
          width: calc(50% - (var(--hc-description-gap) / 2));
        }
      }
    }

    .hello-card__description-item {
      display: flex;
      flex-direction: var(--hc-description-item-direction, row);
      align-items: var(--hc-description-item-alignment, flex-start);
      gap: var(--hc-description-item-gap, 0);
      min-width: 0;
      word-break: break-word;

      @media screen and (min-width: 769px) {
        flex: 1;
      }
    }
  }

  .hello-card__caption-wrapper {
    display: flex;
    flex-direction: var(--hc-caption-direction, row);
    align-items: var(--hc-caption-alignment, flex-start);
    gap: var(--hc-caption-gap, 0);
    padding-top: var(--hc-caption-pt, 0);

    @media screen and (max-width: 768px) {
      flex-wrap: wrap;

      &.hello-card__caption-wrapper--row {
        .hello-card__caption-item {
          width: calc(50% - (var(--hc-caption-gap) / 2));
        }
      }
    }

    .hello-card__caption-item {
      display: flex;
      flex-direction: var(--hc-caption-item-direction, row);
      align-items: var(--hc-caption-item-alignment, flex-start);
      gap: var(--hc-caption-item-gap, 0);
      min-width: 0;
      word-break: break-word;

      @media screen and (min-width: 769px) {
        flex: 1;
      }
    }
  }

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

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

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

  .hello-card__image {
    margin: 0 auto;

    &.left {
      margin-left: 0;
    }

    &.right {
      margin-right: 0;
    }

    &.bottom {
      display: flex;
      align-items: flex-end;
      height: 100%;

      picture {
        width: 100%;
      }
    }
  }

  .hello-card-background {
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: var(--hc-border-radius, 18px);
  }

  img {
    display: block;
  }

  .inline,
  .inline-mobile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;

    .hello-card__icon {
      align-self: unset;
    }
  }

  .inline-mobile {
    @media screen and (max-width: 768px) {
      flex-direction: row;
      align-items: center;
      gap: 24px;
    }
  }

  .inline {
    @media screen and (min-width: 769px) {
      flex-direction: row;
      align-items: center;
      gap: 24px;
    }
  }
}