From d72346a2210e647b9547931f603b0a4df3bcb1e4 Mon Sep 17 00:00:00 2001
From: Yusuf Ipek <yusufipek@protonmail.com>
Date: Thu, 6 May 2021 10:41:08 +0300
Subject: [PATCH] created media queries for card, form, popup, story components
 and for booking section

---
 src/sass/components/_card.scss  | 45 +++++++++++++++++++++++++++++++++
 src/sass/components/_form.scss  |  9 +++++++
 src/sass/components/_popup.scss | 19 ++++++++++++++
 src/sass/components/_story.scss | 18 +++++++++++++
 src/sass/pages/_home.scss       | 28 +++++++++++++++++++-
 5 files changed, 118 insertions(+), 1 deletion(-)

diff --git a/src/sass/components/_card.scss b/src/sass/components/_card.scss
index 87ca392..eda7265 100644
--- a/src/sass/components/_card.scss
+++ b/src/sass/components/_card.scss
@@ -176,4 +176,49 @@
     font-size: 6rem;
     font-weight: 100;
   }
+
+  @include respond(tab-port) {
+    height: auto;
+    border-radius: 3px;
+    background-color: $color-white;
+    box-shadow: $shadow-default;
+
+    &__side {
+      height: auto;
+      transition: all 0.58s ease;
+      position: relative;
+      box-shadow: none;
+
+      &--back {
+        transform: rotateY(0);
+        clip-path: polygon(0 15%, 100% 0, 100% 100%, 0% 100%);
+      }
+    }
+
+    &:hover &__side--front {
+      transform: rotateY(0);
+    }
+
+    &__details {
+      padding: 1rem 3rem;
+    }
+
+    // Back side
+    &__cta {
+      position: relative;
+      top: 0;
+      left: 0;
+      transform: translate(0);
+      width: 100%;
+      padding: 7rem 4rem 4rem 4rem;
+    }
+
+    &__price-box {
+      margin-bottom: 3rem;
+    }
+
+    &__price-value {
+      font-size: 5.5rem;
+    }
+  }
 }
diff --git a/src/sass/components/_form.scss b/src/sass/components/_form.scss
index 0439ffe..28c9f25 100644
--- a/src/sass/components/_form.scss
+++ b/src/sass/components/_form.scss
@@ -16,6 +16,10 @@
     display: block;
     transition: all 0.3s;
 
+    @include respond(tab-port) {
+      width: 100%;
+    }
+
     &:focus {
       outline: none;
       box-shadow: $shadow-light;
@@ -49,6 +53,11 @@
   &__radio-group {
     width: 50%;
     display: inline-block;
+
+    @include respond(tab-port) {
+      width: 100%;
+      margin-bottom: 2rem;
+    }
   }
 
   &__radio-input {
diff --git a/src/sass/components/_popup.scss b/src/sass/components/_popup.scss
index dd37024..5d9b775 100644
--- a/src/sass/components/_popup.scss
+++ b/src/sass/components/_popup.scss
@@ -21,12 +21,21 @@
     opacity: 0;
     transform: translate(-50%, -50%) scale(0.5);
     transition: all 0.4s 0.2s;
+
+    @include respond(tab-land) {
+      display: block;
+    }
   }
 
   &__left {
     width: 33.33333333%;
     display: table-cell;
     vertical-align: middle;
+
+    @include respond(tab-land) {
+      display: block;
+      width: 100%;
+    }
   }
 
   &__right {
@@ -39,6 +48,16 @@
   &__img {
     display: block;
     width: 100%;
+
+    @include respond(tab-land) {
+      width: 50%;
+      float: left;
+      height: 25rem;
+    }
+
+    @include respond(phone) {
+      display: none;
+    }
   }
 
   &__text {
diff --git a/src/sass/components/_story.scss b/src/sass/components/_story.scss
index 5159476..2023dce 100644
--- a/src/sass/components/_story.scss
+++ b/src/sass/components/_story.scss
@@ -9,6 +9,16 @@
   font-size: $default-font-size;
   transform: skewX(-12deg);
 
+  @include respond(tab-port) {
+    width: 100%;
+    padding: 4rem;
+    padding-left: 7rem;
+  }
+
+  @include respond(phone) {
+    transform: skewX(0);
+  }
+
   &__shape {
     width: 15rem;
     height: 15rem;
@@ -17,6 +27,10 @@
     clip-path: circle(50% at 50% 50%);
     transform: translateX(-3rem) skewX(12deg);
     position: relative;
+
+    @include respond(phone) {
+      transform: translateX(-3rem) skewX(0);
+    }
   }
 
   &__img {
@@ -27,6 +41,10 @@
 
   &__text {
     transform: skewX(12deg);
+
+    @include respond(phone) {
+      transform: skewX(0);
+    }
   }
 
   &__caption {
diff --git a/src/sass/pages/_home.scss b/src/sass/pages/_home.scss
index 60e8e5d..4c2d615 100644
--- a/src/sass/pages/_home.scss
+++ b/src/sass/pages/_home.scss
@@ -65,6 +65,7 @@
 .book {
   background-image: linear-gradient(
       105deg,
+      rgba($color-white, 0.9) 0%,
       rgba($color-white, 0.9) 50%,
       transparent 50%
     ),
@@ -73,10 +74,35 @@
   border-radius: $border-radius-default;
   box-shadow: $shadow-default;
 
-  height: 50rem;
+  @include respond(tab-land) {
+    background-image: linear-gradient(
+        105deg,
+        rgba($color-white, 0.9) 0%,
+        rgba($color-white, 0.9) 65%,
+        transparent 65%
+      ),
+      url(../../commons/images/nat-10.jpg);
+  }
+
+  @include respond(tab-port) {
+    background-image: linear-gradient(
+        to right,
+        rgba($color-white, 0.9) 0%,
+        rgba($color-white, 0.9) 65%
+      ),
+      url(../../commons/images/nat-10.jpg);
+  }
 
   &__form {
     width: 50%;
     padding: 6rem;
+
+    @include respond(tab-land) {
+      width: 65%;
+    }
+
+    @include respond(tab-port) {
+      width: 100%;
+    }
   }
 }