Responsive Meet landing page

I've learned some CSS properties throughout this challenge

• Aligning items/tracks along the main(flexbox)/inline(grid) axis

  • justify-content (applies to flexbox/grid containers): aligns items (or tracks) and distributes extra space within the container.
  • justify-items (applies to grid containers): aligns the content of each individual grid item within its cell

    justify-self (applies to grid items): aligns the content of a single grid item within its cell

• Applying a background image with a color layer

  {
    background-image:
      linear-gradient(to right, rgba(var(--color-bg-footer) ,0.75), rgba(#4D96A9,0.75)), /* Top layer: semi-transparent gradient */
      url('../assets/mobile/image-footer.jpg'); /* Bottom layer: actual image */
    background-repeat: no-repeat;
    background-size: cover; // Scales the image as large as possible without stretching it (clipped)
  }
  

• Container-type might affect an element's sizing, if a shink-to-fit width occurs, then an explicit width might be needed

  .container {
    container-type: inline-size;
    width: 100%;
  }
  

• Tip for centering block-level item horizontally: margin: auto;