From 33b418a600ee38b10670e6b05bb38bf957f97685 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=83=9D=E3=83=BC=E3=83=AB=20=E3=82=A6=E3=82=A7=E3=83=83?=
 =?UTF-8?q?=E3=83=96?= <netopwibby@thenetwork.email>
Date: Wed, 10 Oct 2018 17:14:20 -0500
Subject: [PATCH] Responsiveness for feature links

---
 app/sass/partials/_feature-links.scss | 36 ++++++++++++++++++++++-----
 1 file changed, 30 insertions(+), 6 deletions(-)

diff --git a/app/sass/partials/_feature-links.scss b/app/sass/partials/_feature-links.scss
index f27d3eb..139c10c 100644
--- a/app/sass/partials/_feature-links.scss
+++ b/app/sass/partials/_feature-links.scss
@@ -1,18 +1,18 @@
 $width-feature-link: 320px;
 
 .feature-links {
-  display: grid;
-  grid-gap: 2rem;
-  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   list-style-type: none;
   margin-bottom: 2rem;
   padding-top: 0.5rem;
+
+  @media (min-width: 1061px) {
+    display: grid;
+    grid-gap: 2rem;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  }
 }
 
 .feature-link {
-  width: $width-feature-link;
-  min-height: 135px;
-
   background-color: $white;
   border: 1px solid rgba($black, 0.1);
   border-radius: 3px;
@@ -22,6 +22,30 @@ $width-feature-link: 320px;
   transition: box-shadow 0.2s;
   vertical-align: top;
 
+  @media (min-width: 1061px) {
+    width: $width-feature-link; min-height: 135px;
+  }
+
+  @media (max-width: 1060px) {
+    min-height: 150px;
+
+    &:not(:last-of-type) {
+      margin-bottom: 1rem;
+    }
+  }
+
+  @media (min-width: 681px) and (max-width: 1060px) {
+    width: calc(50% - 1rem);
+
+    &:nth-of-type(odd) {
+      margin-right: 1rem;
+    }
+  }
+
+  @media (max-width: 680px) {
+    width: 100%;
+  }
+
   &:not(:hover) {
     .feature-link__background {
       filter: brightness(0.5);