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

.homeBanner {
  .left {
    @apply hidden;
  }
  @screen md {
    @apply grid;
    grid-template-columns: 2fr 4fr;
    .left {
      @apply flex items-end justify-center custom-border-radius-lg;
      background: pink;
      margin-right: 1.6rem;
      // background-image: url('./assets/home_banner.png');
      // background-image: url('https://user-images.githubusercontent.com/76729908/130574371-3b75fa72-9552-4605-aba9-a4b31cd9dce7.png');
      // background-repeat: no-repeat;

      .text {
        @apply relative font-heading text-center;
        padding-bottom: 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: -4rem;
          right: -1.6rem;
          width: 5.7rem;
          height: 4.7rem;
          background-image: url("./assets/text-decorative.svg");
          background-repeat: no-repeat;
        }
      }
    }
  }
}