/**
 * Hero Front Page Block Styles
 * Based on hoitopaikanvalinta theme
 */

.hero--front-page {
  display: flex;
  flex-flow: column nowrap;

  @media screen and (min-width: 47.5em) {
    flex-flow: row nowrap;
  }

  .hero__content,
  .hero__decoration {
    @media screen and (min-width: 47.5em) {
      width: 50%;
    }
  }

  .hero__content {
    padding: 1em;

    @media screen and (min-width: 47.5em) {
      padding: 4em 4em 4em 0;
    }

    .wp-block-heading {
      margin-bottom: 0.4em;
      line-height: 1.125em;
      margin-top: 0;
    }

    .wp-block-button {
      margin-bottom: 1.125em;
      display: inline-block;
    }
  }

  .hero__decoration {
    line-height: 0;

    img {
      object-position: center;
      object-fit: cover;
      width: 100%;
      min-height: 12.5em;

      @media screen and (min-width: 28.125em) {
        min-height: 21.875em;
      }

      @media screen and (min-width: 47.5em) {
        min-height: auto;
        width: 100%;
        height: 100%;
      }
    }
  }
}