From 865da9495c2cf95c80e0c4016ff6ca07e8f349f8 Mon Sep 17 00:00:00 2001
From: Julian Ng <julesnuggy@gmail.com>
Date: Fri, 16 Jun 2023 17:36:25 +0100
Subject: [PATCH 1/3] Add hero class

---
 02-css/style.css | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/02-css/style.css b/02-css/style.css
index ed79e77..74fb429 100644
--- a/02-css/style.css
+++ b/02-css/style.css
@@ -39,6 +39,16 @@ main {
   /* `main` element does not need any styles */
 }
 
+.hero {
+  height: 320px;
+  background-image: url("./images/cover-bg.png");
+  background-size: cover;
+  background-position: center;
+  text-align: center;
+  padding: 48px;
+  color: white;
+}
+
 footer {
   background-color: #1212B2;
   padding: 32px;

From 003df9820497ed731098cb2720ebc0c300dfd9d6 Mon Sep 17 00:00:00 2001
From: Julian Ng <julesnuggy@gmail.com>
Date: Fri, 16 Jun 2023 17:37:15 +0100
Subject: [PATCH 2/3] Add container and content classes

---
 02-css/style.css | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/02-css/style.css b/02-css/style.css
index 74fb429..bf2fa55 100644
--- a/02-css/style.css
+++ b/02-css/style.css
@@ -49,6 +49,23 @@ main {
   color: white;
 }
 
+.container {
+  max-width: 720px;
+  margin: 0 auto;
+}
+
+.content {
+  padding: 24px;
+}
+
+.content > * {
+  margin-bottom: 16px;
+}
+
+.content img {
+  width: 100%;
+}
+
 footer {
   background-color: #1212B2;
   padding: 32px;

From 68d65a87a3003ff5fa62432413148badece149ff Mon Sep 17 00:00:00 2001
From: Julian Ng <julesnuggy@gmail.com>
Date: Fri, 16 Jun 2023 17:53:41 +0100
Subject: [PATCH 3/3] Add card grid css

---
 02-css/style.css | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/02-css/style.css b/02-css/style.css
index bf2fa55..d5cf5ba 100644
--- a/02-css/style.css
+++ b/02-css/style.css
@@ -66,6 +66,16 @@ main {
   width: 100%;
 }
 
+.card {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  column-gap: 5px;
+}
+/*
+  Detailed guide on using CSS Grid's repeat/auto-fit/minmax properties together:
+  https://codesandbox.io/s/css-grid-repeat-autofit-guide-vqz07p?file=/index.html
+*/
+
 footer {
   background-color: #1212B2;
   padding: 32px;