From 122e873aebdcd6f0d38a689310c9d9ccc1f56066 Mon Sep 17 00:00:00 2001
From: Piyush Jindal <jindaliiita@gmail.com>
Date: Thu, 8 Aug 2024 21:48:17 +0530
Subject: [PATCH] Floating image design 1 (#261)

* Floating image design 1

* Minor CSS change

* Review Comments incorporated

---------

Co-authored-by: piyushjindal <piyushjindal@adobe.com>
---
 blocks/floating-images/design-1.css        | 77 ++++++++++++++++++++++
 blocks/floating-images/floating-images.css | 12 ++++
 2 files changed, 89 insertions(+)
 create mode 100644 blocks/floating-images/design-1.css

diff --git a/blocks/floating-images/design-1.css b/blocks/floating-images/design-1.css
new file mode 100644
index 00000000..d6a9762a
--- /dev/null
+++ b/blocks/floating-images/design-1.css
@@ -0,0 +1,77 @@
+.design-1 .block.floating-images > div {
+  background-color: var(--white);
+}
+
+.design-1 .block.floating-images .content h2 {
+  font-size: 2rem;
+}
+
+@media (min-width: 900px) {
+  .design-1 .block.floating-images .image {
+    margin-top: 4.375rem;
+    margin-right: 4.375rem;
+  }
+}
+
+@media (min-width: 1200px) {
+  .design-1 .block.floating-images .content h2 {
+    font-size: var(--heading-font-size-xxl);
+  } 
+}
+
+/**
+Theme Name: Traditional
+*/
+.design-1.traditional .block.floating-images .content h2 {
+  color: var(--primary-color);
+}
+
+.design-1.traditional .block.floating-images .content p {
+  color: var(--primary-color);
+}
+
+.design-1.traditional .block.floating-images .content a {
+  color: var(--primary-color);
+  border: 1px solid var(--primary-color);
+  margin-top: 1rem;
+}
+
+.design-1.traditional .block.floating-images .content a:hover {
+  background-color: var(--primary-color);
+  color: var(--primary-light);
+}
+
+@media (min-width: 900px) {
+  .design-1.traditional .with-border .block.floating-images .image {
+    box-shadow: var(--primary-color) 4.375rem -4.375rem;
+  }
+}
+
+/*
+Theme Name: Black & White
+*/
+.design-1.black-white .block.floating-images .content h2 {
+  color: var(--black);
+}
+
+.design-1.black-white .block.floating-images .content p {
+  color: var(--black);
+}
+
+/* stylelint-disable-next-line no-descending-specificity */
+.design-1.black-white .block.floating-images .content a {
+  color: var(--black);
+  border: 1px solid var(--black);
+  margin-top: 1rem;
+}
+
+.design-1.black-white .block.floating-images .content a:hover {
+  background-color: var(--black);
+  color: var(--white);
+}
+
+@media (min-width: 900px) {
+  .design-1.black-white .with-border .block.floating-images .image {
+    box-shadow: var(--black) 4.375rem -4.375rem;
+  }
+}
diff --git a/blocks/floating-images/floating-images.css b/blocks/floating-images/floating-images.css
index cbd42254..bc8ac470 100644
--- a/blocks/floating-images/floating-images.css
+++ b/blocks/floating-images/floating-images.css
@@ -1,5 +1,6 @@
 /* styles for the floating images auto block */
 @import url('luxury-collection-template.css');
+@import url('./design-1.css');
 
 .block.floating-images {
   margin-bottom: 5em;
@@ -60,6 +61,17 @@
   line-height: var(--line-height-m);
 }
 
+.block.floating-images .content a {
+  color: var(--primary-color);
+  border: 1px solid var(--primary-color);
+  margin-top: 1rem;
+}
+
+.block.floating-images .content a:hover {
+  background-color: var(--primary-color);
+  color: var(--primary-light);
+}
+
 @media screen and (min-width: 900px) {
   .block.floating-images > div {
     flex-direction: row;