.block-hubspot-form {
  padding-bottom: 100px;
  position: relative;
  z-index: 10;

  &.gated-content,
  &[data-gated="true"] {
    display: none;
  }

  &[data-gated="false"] {
    display: block;
  }

  & .form-wrapper {
    border-radius: var(--wp--custom--border-radius--large);
    display: grid;
    grid-template-columns: 1fr;
    margin: 0 auto;
    max-width: 1068px;
    padding: 1rem 1rem 2rem;
    position: relative;

    @media (width >= 840px) {
      grid-template-columns: 1fr 1fr;
      padding: 4rem;
    }

    &:before {
      background: var(--wp--preset--color--lightorange);
      background: linear-gradient(to bottom right, #FFA403, #FF7F00);
      border-radius: var(--wp--custom--border-radius--large);
      bottom: -0.5rem;
      content: '';
      left: -0.5rem;
      height: 100%;
      position: absolute;
      width: 100%;
      z-index: 0;      
    }
    @media (width >= 840px) {
      &:before {
        bottom: -2rem;
        left: -2rem;
      }
    }

    &:after {
      background: var(--wp--preset--color--bg-off-white);
      border-radius: var(--wp--custom--border-radius--large);
      content: '';
      left: 0;
      height: 100%;
      position: absolute;
      width: 100%;
      z-index: 0;

      @media (width >= 840px) {
        grid-template-columns: 1fr 1fr;
      }
    }
  }

  & .form-content {
    position: relative;
    padding-right: 50px;
    z-index: 5;
  }

  & .hubspot-form {
    position: relative;
    z-index: 5;

    & .form-label {
      color: var(--wp--preset--color--darkorange);
      font-weight: 700;
      text-transform: uppercase;
    }
  }

  & .title {
    color: var(--wp--preset--color--black);
    font-size: var(--wp--preset--font-size--lg);
    font-weight: 700;
    line-height: 1.1;

    & strong {
      color: var(--wp--preset--color--darkorange);
      font-weight: 700;
    }
  }
}