@use '@styles/variables.module.scss' as *;
@use '@styles/classes.module.scss' as *;

.hero {
  overflow-x: hidden;
  flex: 1 1 0;
  min-height: 0; // Allows flexbox to let it shrink in overflow
  display: flex;

  .left {
    flex: 1;
    color: $color-primary;
    max-width: 50%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .right {
    position: relative;

    flex: 1;
    background: $color-secondary;
    color: $color-secondary;
    max-width: 50%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .background {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
      pointer-events: none;
    }
    > *:not(.background) {
      // Cards/Form content
      position: relative;
      z-index: 1;
    }
  }
}

@media (max-width: $bp-small) {
  .hero {
    flex-direction: column;

    .left,
    .right {
      max-width: 100%;
    }
  }
}
