Box Sizing

When you use box-sizing: border-box;, padding and border are included in the element’s total width and height. This makes it easier to manage the sizing of elements without worrying that adding padding or borders will affect the layout in unintended ways.

Pixels vs VH

Pixels are non-responsive, while VH (Viewport Height) scales dynamically based on the height of the screen. Using VH for height measurements ensures that your layout adapts to different screen sizes and provides a more fluid design for responsive interfaces.

Shadow

Shadows are defined using these key properties:

• offset-x: Horizontal offset (left-right positioning of the shadow).
• offset-y: Vertical offset (up-down positioning of the shadow).
• blur-radius: Determines how blurry or sharp the shadow is.

Flexbox Layout

The .content-container uses Flexbox to arrange the three sections (article, image, and video) side by side in a flexible and responsive layout:

• The article section takes up 1/3 of the width.
• The image section takes up 2/3 of the width.
• The video section takes up 1/3 of the width.

For responsive design, on smaller screens, the layout adjusts using a media query to stack the sections vertically, improving readability and usability on mobile devices.