.DetailPage {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  padding-left: 4.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  // gap: 1rem;
  .biggerPic {
    flex: 3;
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    transition: all 1s ease;
    // box-shadow: 2px -2px 5px 0px var(--primary-2);
    // background: url("/images/logo.svg");
    .CarouselLoading {
      height: 95vh;
      width: 100%;
    }
  }
  .biggerDetail {
    flex: 1;
    transition: all 1s ease;
  }
  .biggerDetail:hover {
    flex: 2;
  }

  .curvy {
    position: absolute;
    height: 2.2rem;
    width: 2.2rem;
    left: 0;
    bottom: 15.8rem;
    // background: red;
    border-radius: 0 0 0 2.2rem;
    box-shadow: -10px 10px 0 10px var(--bg-color);
  }
  .curvy2 {
    @extend .curvy;
    bottom: 7.3rem;
    left: 11rem;
  }
  .curvy5 {
    @extend .curvy;
    bottom: 6.8rem;
    left: 0rem;
  }
  .curvy3 {
    position: absolute;
    height: 2rem;
    width: 2rem;
    // background: red;
    border-radius: 0 2rem 0 0;
    box-shadow: 7px -7px 0 7px var(--bg-color);
    top: 0rem;
    left: 4.9rem;
  }
  .curvy4 {
    @extend .curvy3;
    left: 8rem;
    top: 3.1rem;
  }

  .DetailBanner {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0.5rem;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;

    .poster {
      width: 10rem;
      outline: 1rem solid var(--bg-color);
      border-radius: 1rem;
      position: relative;
      bottom: -1rem;
      left: -0.5rem;
      background: var(--bg-color);

      .rating {
        position: absolute;
        top: -0.5rem;
        right: -0.5rem;
        color: var(--ascent-color);
        overflow: hidden;
        border-radius: 50%;
        background: var(--primary-1);
        outline: 0.5rem solid var(--bg-color);
        height: 3.3rem;
        width: 3.3rem;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 2;
      }
    }
    .HomeHeroMeta {
      position: relative;
      bottom: -2.7rem;
      left: 0.5rem;
      // right: -0.5rem;
      margin-bottom: 2rem;
      border-radius: 1.5rem;
      outline: 0.7rem solid var(--bg-color);
      background: var(--primary-1);
      padding: 1rem;
      text-align: center;
      // width: 20rem;
      min-width: 14rem;
      max-width: 22rem;
      text-overflow: ellipsis;
      // overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 1rem;
      // margin-left: clamp(1rem, 35%, 50vw);
      padding-right: 1.5rem;
      // transform: translateX(-2rem);
      h1 {
        width: 100%;
        height: 1lh;
        text-overflow: ellipsis;
        overflow: hidden;
        margin-right: 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-right: 1rem;

        .type {
          // display: inline-block;
          transform: rotateZ(90deg);
          position: absolute;
          right: 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;
        }
      }
      // right curve
      &:after {
        content: "";
        height: 1.5rem;
        width: 1.5rem;
        position: absolute;
        right: -2.18rem;
        bottom: 0.2rem;
        // background: red;
        border-radius: 0 0 0 2.2rem;
        box-shadow: -6px 6px 0 6px var(--bg-color);
      }
    }
  }
}

.PersonPage {
  .HomeHeroMeta {
    // width: 15rem !important;
    position: relative;
    left: -1rem !important;
  }
  .biggerPic {
    .curvy5 {
      left: 0;
      bottom: 6.35rem !important;
      // background: red;
    }
  }
}

@media (max-width: 769px) {
  .PersonPage {
    .HomeHeroMeta {
      // width: 15rem !important;
      position: relative;
      left: -1rem !important;
    }
    .biggerPic {
      .curvy5 {
        left: 0;
        bottom: 5.85rem !important;
        // background: red;
      }
    }
    img {
      object-fit: cover !important;
    }
  }
  .DetailPage {
    height: unset;
    min-height: 100vh;
    overflow-y: auto;
    padding-left: unset;
    // padding: 1rem;
    padding-bottom: 2.7rem;
    flex-direction: column;
    .biggerPic {
      flex: 3;
      margin: 1rem;
      // border-radius: unset;
      margin-bottom: 1rem;
      min-height: 60vh;
      width: calc(100vw - 2rem);
      .CarouselLoading {
        height: 60vh;
        width: calc(100vw - 2rem);
      }
      .curvy {
        left: 0;
        bottom: 10.65rem;
        // background: red;
      }
      .curvy2 {
        left: 7.85rem;
        bottom: 6.85rem;
      }
      .curvy5 {
        bottom: 6.28rem;
        left: 0rem;
      }
      .curvy3 {
        position: absolute;
        height: 1rem;
        width: 1rem;
        // background: red;
        border-radius: 0 2rem 0 0;
        box-shadow: 5px -5px 0 5px var(--bg-color);
        top: 0rem;
        left: 3.85rem;
      }
      .curvy4 {
        left: 6rem;
        top: 2.15rem;
      }
    }
    .detailBiggerPic {
      width: 70%;
      // max-width: 100%;
      // min-width: 70%;
    }
    .biggerDetail {
      flex: 2;
      width: 100%;
      min-height: 50vh;
    }
    .DetailBanner {
      .poster {
        outline: 0.9rem solid var(--bg-color);
        width: unset;
        .rating {
          position: absolute;
          top: -0.5rem;
          right: -0.5rem;
          color: var(--ascent-color);
          overflow: hidden;
          height: 2.5rem;
          width: 2.5rem;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 50%;
          background: var(--primary-1);
          outline: 0.2rem solid var(--bg-color);
          z-index: 2;
        }
      }
      .HomeHeroMeta {
        bottom: -2.5rem;
        left: 0.2rem;
        width: unset;
        min-width: 12rem;
        max-width: 20rem;
        letter-spacing: -1.5px !important;
        // margin-left: clamp(0rem, 0%, 10vw);
        .HomeHeroMetaRow2 {
          .type {
            // display: inline-block;
            transform: rotateZ(90deg);
            position: absolute;
            right: 0;
            top: 40%;
            // background: red;
          }
          .links {
            letter-spacing: -1.5px;
          }
          .HomeHeroIcons {
            font-size: 1.2rem;
          }
          .IconsMobileNone {
            display: none;
          }
        }
        // right curve
        &:after {
          right: -2.18rem;
          bottom: 0rem;
        }
      }
    }
  }
}
