0:00 The first thing we should do is move away from an absolute unit value like pixels and use something like a percentage-based value. Right now, we're using w-40, but look at what happens if I change the dimension of the container element to something like 48.

0:14 As you can see, the ribbon banner itself is not going to adapt to this, so let's go back to 32, and we're going to use a percentage-based value. I'll start with w-full, which is 100 percent. That's going to be too short, but now, if the container width changes, the ribbon width will remain proportional to the container.

0:34 100 percent width is obviously not enough. What about 200 percent? We don't have that value out of the box, but we can use arbitrary values to go width 200 percent. Whoa, this is clearly too much now. It's breaking out of our view port.

0:49 What about 150 percent? It's getting close. You might think that we can get away with this, especially because we're going to crop out the excess of the ribbon. Yeah, if we look at the figma file for a second, we can see that our banner rectangle here is being cropped to the area of the container.

1:07 We'll eventually translate this in CSS by using overflow-hidden on the container. Let me show you that real quick. On the container element here, I'll add overflow-hidden. Eventually, this would not have a background color either. We just have it to see what happens now.

1:23 Our text is still cropped, but if we also had a text-center class on the ribbon, you would likely get away with this. We're not going to settle for that here. We want to have the exact value, and we want to be able to explain why, which is the key part. While we need the overflow-hidden class eventually, I'll remove it for now. I'll bring back the background color of bg-amber-100.

1:45 150 percent is too much. What about 140 percent? Ooh, it's getting really close. Let me open this in a browser so I can zoom in real close. You can see we're not quite there, but it's getting really close. Maybe 141 percent? Mm, that looks very, very close.

2:05 What are we doing here? Magic numbers, [gasp that's what we're doing here. To this, I say stop. [electronic stop sound] Let's figure out the real, logical value that our banner should have. Instead of nudging our width one percent at a time like we started doing, let's start thinking about what we're trying to measure here.

2:22 Let's go back to drawing imaginary shapes in our figma file. Take a look at that shape here, a right-angled triangle to be precise. All of a sudden, it's pretty clear what we're trying to measure. We're measuring the length of a right-angled triangle's longest edge, which is also called the hypotenuse.

2:39 You probably learned at some point about the Pythagorean theorem. That's pretty hard to say for me in English, and it's also probably been a long while since you used that theorem last. If you take a right-angled triangle where the longest edge is C, A^2 + B^2 = C^2.

2:55 In our case, let's say the value of A was one and B was one as well. You can see the value of C would be approximately 1.41. Wait, remember the width we've used in our code? 141 percent. If our container's height and width were both 100 percent, the diagonal of that square would be roughly 141.42 percent.

3:18 I can copy that value and use that here. You can see that now width is set with extreme precision. More importantly, we have an explanation for this value. We went from nudging our width bit by bit to having a scientific explanation for why we have an exact value with a theorem to back it up.