@import "../../../../styles/utilities";

.homeBanner {
  @apply spacing-horizontal overflow-hidden;
  margin-bottom: 2.8rem;

  .left {
    @apply hidden;
    margin-bottom: 3rem;
    max-width: 50rem;
  }
  @screen xl {
    @apply grid;
    grid-template-columns: 35.75% 64.25%;
    // grid-template-columns: 1fr 1.8fr;
    > div {
      @apply w-full overflow-hidden;
    }
    .left {
      @apply relative flex items-end justify-center shape-common-lg;
      margin-right: 1.6rem;
      .imgWrap {
        @apply absolute w-full h-full;
        top: 0;
        left: 0;
        > div {
          @apply w-full h-full shape-common-lg;
        }
        img {
          object-fit: cover;
        }
      }

      .text {
        @apply relative font-heading text-center;
        padding: 2.4rem 2.4rem 4.8rem;
        width: min-content;
        color: var(--white);
        font-size: 8.8rem;
        line-height: 8rem;
        letter-spacing: -0.03em;
        font-weight: bold;
        text-transform: uppercase;

        &::after {
          @apply absolute;
          content: "";
          top: -2.4rem;
          right: 0.8rem;
          width: 5.7rem;
          height: 4.7rem;
          background-image: url("./assets/text-decorative.svg");
          background-repeat: no-repeat;
        }
      }
    }
  }
}