<app-card title="1) Essence Mascara Lash Princess" thumbnail="https://cdn.dummyjson.com/product-images/beauty/essence-mascara-lash-princess/thumbnail.webp"><template shadowrootmode="open">
        <style>
          div {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            border: 1px solid #818181;
            width: fit-content;
            border-radius: 10px;
            padding: 2rem 1rem;
            height: 680px;
            justify-content: space-between;
            background-color: #fff;
            overflow-x: hidden;
          }
          button {
            background: var(--color-accent);
            color: var(--color-white);
            padding: 1rem 2rem;
            border: 0;
            font-size: 1rem;
            border-radius: 5px;
            cursor: pointer;
          }
          img {
            max-width: 500px;
            min-width: 500px;
            width: 100%;
          }
          h3 {
            font-size: 1.85rem;
          }

          @media(max-width: 768px) {
            img {
              max-width: 300px;
              min-width: 300px;
            }
            div {
              height: 500px;
            }
          }
        </style>
        <div>
          <h3>1) Essence Mascara Lash Princess</h3>
          <img src="https://cdn.dummyjson.com/product-images/beauty/essence-mascara-lash-princess/thumbnail.webp" alt="1) Essence Mascara Lash Princess" loading="lazy" width="100%">
          <button onclick="this.getRootNode().host.selectItem()">View Item Details</button>
        </div>
      </template></app-card>
        
          <app-card title="2) Eyeshadow Palette with Mirror" thumbnail="https://cdn.dummyjson.com/product-images/beauty/eyeshadow-palette-with-mirror/thumbnail.webp"><template shadowrootmode="open">
        <style>
          div {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            border: 1px solid #818181;
            width: fit-content;
            border-radius: 10px;
            padding: 2rem 1rem;
            height: 680px;
            justify-content: space-between;
            background-color: #fff;
            overflow-x: hidden;
          }
          button {
            background: var(--color-accent);
            color: var(--color-white);
            padding: 1rem 2rem;
            border: 0;
            font-size: 1rem;
            border-radius: 5px;
            cursor: pointer;
          }
          img {
            max-width: 500px;
            min-width: 500px;
            width: 100%;
          }
          h3 {
            font-size: 1.85rem;
          }

          @media(max-width: 768px) {
            img {
              max-width: 300px;
              min-width: 300px;
            }
            div {
              height: 500px;
            }
          }
        </style>
        <div>
          <h3>2) Eyeshadow Palette with Mirror</h3>
          <img src="https://cdn.dummyjson.com/product-images/beauty/eyeshadow-palette-with-mirror/thumbnail.webp" alt="2) Eyeshadow Palette with Mirror" loading="lazy" width="100%">
          <button onclick="this.getRootNode().host.selectItem()">View Item Details</button>
        </div>
      </template></app-card>
        
          <app-card title="3) Powder Canister" thumbnail="https://cdn.dummyjson.com/product-images/beauty/powder-canister/thumbnail.webp"><template shadowrootmode="open">
        <style>
          div {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            border: 1px solid #818181;
            width: fit-content;
            border-radius: 10px;
            padding: 2rem 1rem;
            height: 680px;
            justify-content: space-between;
            background-color: #fff;
            overflow-x: hidden;
          }
          button {
            background: var(--color-accent);
            color: var(--color-white);
            padding: 1rem 2rem;
            border: 0;
            font-size: 1rem;
            border-radius: 5px;
            cursor: pointer;
          }
          img {
            max-width: 500px;
            min-width: 500px;
            width: 100%;
          }
          h3 {
            font-size: 1.85rem;
          }

          @media(max-width: 768px) {
            img {
              max-width: 300px;
              min-width: 300px;
            }
            div {
              height: 500px;
            }
          }
        </style>
        <div>
          <h3>3) Powder Canister</h3>
          <img src="https://cdn.dummyjson.com/product-images/beauty/powder-canister/thumbnail.webp" alt="3) Powder Canister" loading="lazy" width="100%">
          <button onclick="this.getRootNode().host.selectItem()">View Item Details</button>
        </div>
      </template></app-card>
        
          <app-card title="4) Red Lipstick" thumbnail="https://cdn.dummyjson.com/product-images/beauty/red-lipstick/thumbnail.webp"><template shadowrootmode="open">
        <style>
          div {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            border: 1px solid #818181;
            width: fit-content;
            border-radius: 10px;
            padding: 2rem 1rem;
            height: 680px;
            justify-content: space-between;
            background-color: #fff;
            overflow-x: hidden;
          }
          button {
            background: var(--color-accent);
            color: var(--color-white);
            padding: 1rem 2rem;
            border: 0;
            font-size: 1rem;
            border-radius: 5px;
            cursor: pointer;
          }
          img {
            max-width: 500px;
            min-width: 500px;
            width: 100%;
          }
          h3 {
            font-size: 1.85rem;
          }

          @media(max-width: 768px) {
            img {
              max-width: 300px;
              min-width: 300px;
            }
            div {
              height: 500px;
            }
          }
        </style>
        <div>
          <h3>4) Red Lipstick</h3>
          <img src="https://cdn.dummyjson.com/product-images/beauty/red-lipstick/thumbnail.webp" alt="4) Red Lipstick" loading="lazy" width="100%">
          <button onclick="this.getRootNode().host.selectItem()">View Item Details</button>
        </div>
      </template></app-card>
        
          <app-card title="5) Red Nail Polish" thumbnail="https://cdn.dummyjson.com/product-images/beauty/red-nail-polish/thumbnail.webp"><template shadowrootmode="open">
        <style>
          div {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            border: 1px solid #818181;
            width: fit-content;
            border-radius: 10px;
            padding: 2rem 1rem;
            height: 680px;
            justify-content: space-between;
            background-color: #fff;
            overflow-x: hidden;
          }
          button {
            background: var(--color-accent);
            color: var(--color-white);
            padding: 1rem 2rem;
            border: 0;
            font-size: 1rem;
            border-radius: 5px;
            cursor: pointer;
          }
          img {
            max-width: 500px;
            min-width: 500px;
            width: 100%;
          }
          h3 {
            font-size: 1.85rem;
          }

          @media(max-width: 768px) {
            img {
              max-width: 300px;
              min-width: 300px;
            }
            div {
              height: 500px;
            }
          }
        </style>
        <div>
          <h3>5) Red Nail Polish</h3>
          <img src="https://cdn.dummyjson.com/product-images/beauty/red-nail-polish/thumbnail.webp" alt="5) Red Nail Polish" loading="lazy" width="100%">
          <button onclick="this.getRootNode().host.selectItem()">View Item Details</button>
        </div>
      </template></app-card>