Fylo Data Storage Component

Hi Agyemang, good job putting this together! For the triangle with the ::after pseudo element, instead of having just border: solid transparent, try specifying the sides, like this:

.grid-item-3::after {
  top: 98%;
  right: 0; // remove left
  border-left: solid transparent;
  border-top: solid white;
  // rest of your code
}

Also, change the border-radius in .grid-item-3 to border-radius: 8px 8px 0 8px;, which should give you that sharp corner instead of a rounded one.

With the media query, I'd choose a much higher breakpoint since right now when the layout changes, the sides are cut off. Also, there appears to be some overflow going on, and I think it may have to do with the large margins you're using (such as in .grid-item-3) to do positioning. I would actually suggest not having .grid-item-3 as a grid element but to have that as a child of .grid-item-2 instead, and I'd use position: absolute instead of using things like margin-left: 21rem, which is what I think is causing things to be pushed off to the right side of the screen.

Hope this helps you out!