diff --git a/index.html b/index.html
index 777b808..57b9e04 100644
--- a/index.html
+++ b/index.html
@@ -60,63 +60,59 @@
+ Nasze Wyroby
-
Nasze Wyroby
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/style.css b/style.css
index b19fc34..9beb25b 100644
--- a/style.css
+++ b/style.css
@@ -131,10 +131,10 @@ nav > div {
.about-us {
background-color: var(--surface-container-low);
+ padding: 2rem;
& > div {
max-width: var(--max-content-width);
margin: 0 auto;
- padding: 2rem;
gap: 4rem;
display: grid;
grid-template-columns: 3fr 2fr;
@@ -183,84 +183,92 @@ nav > div {
}
.featured-delights {
+ max-width: var(--max-content-width);
+ margin: 0 auto;
+ padding: 2rem;
+ gap: 2rem;
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ grid-template-rows: auto auto;
+
+ & > h2 {
+ align-self: center;
+ justify-self: center;
+ grid-column: 1/ span 3;
+ }
+
+ @media (max-width: 768px) {
+ grid-template-columns: 1fr;
+
+ & > h2 {
+ grid-column: 1;
+ }
+ }
+
& > div {
- max-width: var(--max-content-width);
- margin: 6rem auto;
+ width: 100%;
display: flex;
flex-direction: column;
- align-items: center;
- justify-content: center;
- gap: 5rem;
- & > div {
- display: flex;
- align-items: center;
- flex-direction: row;
- justify-content: center;
- gap: 3rem;
- & > div {
- width: 100%;
+ position: relative;
+ border-radius: var(--border-radius);
+ overflow: hidden;
+ background-color: white;
- position: relative;
- border-radius: var(--border-radius);
- overflow: hidden;
- background-color: white;
+ .greener {
+ background-color: rgb(from var(--secondary-container) r g b / 0.3);
+ }
- &:nth-child(2) {
- background-color: rgb(from var(--secondary-container) r g b / 0.3);
- }
+ & img {
+ display: block;
+ width: 100%;
+ scale: 1;
+ transition: scale 0.7s;
+ }
- & img {
- display: block;
- width: 100%;
- scale: 1;
- transition: scale 0.7s;
- }
+ & > div:first-child {
+ overflow: hidden;
+ }
- & > div:first-child {
- overflow: hidden;
- }
+ & > div:last-child {
+ display: grid;
+ grid-template-rows: auto auto 1fr;
+ padding: 2rem;
+ flex-grow: 1;
- & > div:last-child {
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- padding: 1.5rem 2rem 3rem 2rem;
-
- & > a {
- display: flex;
- align-items: center;
- justify-content: center;
- gap: 1rem;
- color: var(--primary);
- font-weight: bold;
- text-decoration: none;
- }
- }
-
- top: 0;
- transition: top 0.2s;
-
- &:hover {
- top: -10px;
-
- & img {
- scale: 1.1;
- }
-
- & svg {
- margin-left: 10px;
- }
- }
-
- & svg {
- transition-duration: 0.2s;
- height: 2em;
- width: 2em;
- }
+ & > a {
+ display: flex;
+ align-self: end;
+ align-items: center;
+ justify-content: flex-start;
+ gap: 1rem;
+ color: var(--primary);
+ font-weight: bold;
+ text-decoration: none;
}
}
+
+ top: 0;
+ transition: top 0.2s;
+
+ &:hover {
+ top: -10px;
+
+ & img {
+ scale: 1.1;
+ }
+
+ & svg {
+ margin-left: 10px;
+ }
+ }
+
+ & svg {
+ transition-duration: 0.2s;
+ height: 2em;
+ width: 2em;
+ }
}
}