.HomeHero {
  height: 90vh;
  width: 100vw;
  overflow: hidden;
  // padding-left: 4rem;
  position: relative;
  // display: flex;
  .HomeCarousel {
    height: 80vh;
    max-width: calc(100vw - 5rem);
    margin: 1rem 0 0 0;
    // overflow: hidden;
    border-radius: 2rem;
    position: relative;
    .CarouselLoading {
      height: calc(80vh - 1rem);
      width: 100%;
      margin: 1rem 0 0 0;
      border-radius: 2rem;
      position: relative;
    }
    .curvy {
      position: absolute;
      height: 2.2rem;
      width: 2.2rem;
      left: clamp(1rem, calc(35vw - 2.87rem), 50vw);
      bottom: 0;
      // background: red;
      border-radius: 0 0 2rem 0;
      box-shadow: 70px 70px 0 70px var(--bg-color);
    }
    .curvy2 {
      position: absolute;
      height: 2.2rem;
      width: 2.2rem;
      left: clamp(1rem, calc(35vw - 2.87rem + 23.55rem), 70rem);
      bottom: 0;
      // background: red;
      border-radius: 0 0 0 2rem;
      box-shadow: -70px 70px 0 70px var(--bg-color);
    }
    .curvy3 {
      position: absolute;
      height: 2.2rem;
      width: 2.2rem;
      left: 0;
      top: 0;
      // background: red;
      border-radius: 2rem 0 0 0rem;
      box-shadow: -70px -70px 0 70px var(--bg-color);
    }
    .curvy4 {
      position: absolute;
      height: 2.2rem;
      width: 2.2rem;
      right: 0;
      top: 0;
      // background: red;
      border-radius: 0rem 2rem 0 0rem;
      box-shadow: 70px -70px 0 70px var(--bg-color);
    }
  }
  .HomeHeroMeta {
    position: absolute;
    bottom: 0;
    margin-bottom: -2.5rem;
    border-radius: 1.5rem;
    outline: 0.7rem solid var(--bg-color);
    background: var(--primary-1);
    padding: 1rem;
    text-align: center;
    width: 20rem;
    text-overflow: ellipsis;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
    margin-left: clamp(1rem, 35vw, 50vw);
    padding-left: 1.5rem;
    // transform: translateX(-2rem);
    h1 {
      width: 100%;
      height: 1lh;
      text-overflow: ellipsis;
      overflow: hidden;
      margin-left: 0.5rem;
      // padding-left: 5rem;
    }
    .HomeHeroMetaRow2 {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.7rem;
      color: var(--primary-2);
      font-size: 1rem;
      cursor: pointer;
      padding-left: 1rem;

      .type {
        // display: inline-block;
        transform: rotateZ(90deg);
        position: absolute;
        left: 0;
        top: 40%;
        // background: red;
      }
      .links {
        background: var(--ascent-color);
        color: var(--primary-1);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 0.3rem;
        padding: 0.3rem 0.5rem;
        gap: 0.3rem;
      }
      .HomeHeroIcons {
        font-size: 1.2rem;
      }
    }
    // https://www.youtube.com/watch?v=SkML640BcoA
  }
}

@media (max-width: 769px) {
  .HomeHero {
    padding-left: unset;
    // margin-top: 1rem;
    // padding:0 1rem;
    height: 70vh;
    .HomeCarousel {
      height: 60vh;
      max-width: calc(100vw - 2rem);
      margin: 1rem 0 0 0;
      // overflow: hidden;
      border-radius: 2rem;
      .CarouselLoading {
        height: 60vh;
        width: 100%;
      }
      .curvy {
        display: none;
      }
      .curvy2 {
        position: absolute;
        height: 2.2rem;
        width: 2.2rem;
        left: clamp(0rem, calc(0vw - 2.87rem + 21.45rem), 100vw);
        bottom: 0;
        // background: red;
        border-radius: 0 0 0 2.2rem;
        box-shadow: -70px 70px 0 70px var(--bg-color);
      }
    }
    .HomeHeroMeta {
      width: unset;
      width: 18rem;
      // margin-bottom: 1rem;
      margin-left: clamp(0rem, 0%, 10vw);
      overflow: unset;
      &::after {
        content: "";
        position: absolute;
        height: 2.2rem;
        width: 2.2rem;
        left: 0;
        bottom: 6.85rem;
        // background: red;
        border-radius: 0 0 0 2rem;
        box-shadow: -5px 5px 0 5px var(--bg-color);
      }
      &::before {
        content: "";
        position: absolute;
        height: 1rem;
        width: 1rem;
        left: -0.5rem;
        bottom: 6rem;
        background: var(--bg-color);
      }
    }
  }
}
