NEXT.JS WebApp :- I want to align divs in such a way that it look like this hulu clone

Output

Hulu Clone

Code here

JS Code :-

<div className={styles.div1}>
      <Link href={`/posts/${slug}`} className={styles.link}>
        <div className={styles.div2}>
          <h1 className={styles.h1}>{title}</h1>
        </div>
      </Link>
</div>

CSS Code :-

.div1 {

    background: linear-gradient(to right, rgb(255, 118, 193), rgb(168, 86, 255);
    width: 40vw;
    margin:1vh;
    height: 15vh;
    border: #000000 1px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgb(0, 0, 0);
    padding: 1em;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.div3 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
    float: left;
    overflow: hidden;
}

Output after adding this CSS

Output