.type-banner {
  position: relative;
  display: flex;
  aspect-ratio: 16 / 9;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  overflow: hidden
  }
  
  @media (min-width: 768px) {
  
  .type-banner {
  aspect-ratio: auto;
      height: 254px
  }
  }
  
    @media (min-width: 1024px) {.type-banner {
      height: 440px
  }
    }
  
    .type-banner .img-box {
      top: 50%;
      transform: translateY(-50%);
      position: absolute;
      left: 0px;
      height: 100%;
      width: 100%;
    }
  
    .type-banner .img-box::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          90deg,
          rgba(18, 18, 18, 0.8) 14.32%,
          rgba(18, 18, 18, 0) 44.13%
        );
        pointer-events: none;
      }
  
    .type-banner .img-box img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover
  }
  
    .type-banner .twm-container {
  position: relative
  }
  
    .type-banner .twm-container .text {
  width: 100%
  }
  
    @media (min-width: 768px) {
  
    .type-banner .twm-container .text {
          max-width: 335px
      }
        }
  
    @media (min-width: 1024px) {
  
    .type-banner .twm-container .text {
          max-width: 447px;
          margin: 0 2.5rem
      }
        }
  
    .type-banner .twm-container .text h2 {
          font-size: 30px;
          line-height: 120%;
          margin-bottom: 0.75rem;
          font-weight: 500;
          --tw-text-opacity: 1;
          color: rgb(255 255 255 / var(--tw-text-opacity, 1));
        }
  
    @media (min-width: 1024px) {
  
  .type-banner .twm-container .text h2 {
  margin-bottom: 1rem;
            font-size: 3rem
  }
  }
  
    .type-banner .twm-container .text p {
  font-size: 1.125rem;
  line-height: 1.5;
  letter-spacing: 0.08em
  }
  
  /*# sourceMappingURL=type-banner.css.map */