diff --git a/css/index.css b/css/index.css index bdca38b..ab2408e 100644 --- a/css/index.css +++ b/css/index.css @@ -209,14 +209,21 @@ } .gallery__carousel { - position: relative; + display: grid; + grid-template-columns: 42px minmax(0, 1fr) 42px; + align-items: center; + column-gap: 10px; + margin-bottom: 30px; +} + +.gallery__viewport { overflow: hidden; } .gallery__track { display: flex; gap: 20px; - margin-bottom: 30px; + margin-bottom: 0; } .gallery__item { @@ -284,39 +291,37 @@ } .gallery__arrow { - position: absolute; display: grid; - top: 45%; - width: 44px; - height: 44px; - border: 1.5px solid var(--butter-light); - background: var(--butter-light); - border-radius: var(--radius-lg); + width: 34px; + height: 34px; + border: 0; + background: #c8cb63; + border-radius: 999px; font-family: var(--font-main); - display: none; font-weight: 400; - font-size: 1.25rem; + font-size: 1.45rem; place-items: center; z-index: 2; - color: var(--olive); + color: var(--olive-dark); cursor: pointer; text-decoration: none; - transition: background-color 0.2s ease, border-color 0.2s ease; + transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } .gallery__arrow:hover, .gallery__arrow:focus-visible { - border: 1.5px solid var(--butter); - background: var(--butter); + color: var(--olive-dark); + background: #d9dc78; + transform: scale(1.04); } .gallery__arrow--prev { - left: var(--space-24); + justify-self: start; } .gallery__arrow--next { - right: var(--space-24); + justify-self: end; } @@ -342,7 +347,7 @@ .gallery_dot:hover, .gallery_dot--active { - background: var(--olive);; + background: var(--olive); transform: scale(1.2); } @@ -352,6 +357,17 @@ } @media (max-width: 900px) { + .gallery__carousel { + grid-template-columns: 34px minmax(0, 1fr) 34px; + column-gap: 8px; + } + + .gallery__arrow { + width: 30px; + height: 30px; + font-size: 1.2rem; + } + .gallery__track { gap: 16px; } @@ -550,4 +566,4 @@ .faq-content p { padding: var(--space-2) 0; } -} \ No newline at end of file +} diff --git a/event_create.html b/event_create.html index 6ba41f1..94a7c1d 100644 --- a/event_create.html +++ b/event_create.html @@ -342,8 +342,8 @@
-
-
Maximale Personenanzahl
+
+
Maximale Gästeanzahl
diff --git a/index.html b/index.html index 46587b7..8486c42 100644 --- a/index.html +++ b/index.html @@ -82,15 +82,15 @@

Einblick in Cooking-Erlebnisse

-

#gemeinsam_invité auf Instagram

- +

Einblick in Cooking-Erlebnisse

+

#gemeinsam_invité auf Instagram