responsive

css/style.css

@@ -1,5 +1,5 @@
 * {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 body {
@@ -12,40 +12,47 @@ body {
 }
 
 .background {
-	background-color: #0e0e0e;
-  background-image: repeating-linear-gradient(135deg, #000, #19191a 1%, transparent 1.5%, transparent 50% );
+  background-color: #0e0e0e;
+  background-image: repeating-linear-gradient(
+    135deg,
+    #000,
+    #19191a 1%,
+    transparent 1.5%,
+    transparent 50%
+  );
   background-size: 100px 100px;
   position: absolute;
-  top:  0;
-  left:  0;
-  width:  100%;
-  height:  100%;
-  animation:  fade-in 2500ms ease-out forwards 1s;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  animation: fade-in 1750ms ease-out forwards;
   opacity: 0;
 }
 
 .card {
-	display: block;
-	position: relative;
-  width: 420px;
+  display: block;
+  position: relative;
+  max-width: 420px;
+  width: 80%;
   height: 260px;
-	color: #fff;
-	flex: none;
-	perspective: 1000px;
+  color: #fff;
+  flex: none;
+  perspective: 1000px;
 }
 
 .card__figure {
-	margin: 0;
-	width: 100%;
-	height: 100%;
-	display: block;
-	position: relative;
-	background: #111;
-	border-radius: 2px;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+  position: relative;
+  background: #111;
+  border-radius: 3px;
 }
 
 .card__figure::before {
-  content: '';
+  content: "";
   position: absolute;
   width: calc(100% - 14px);
   height: calc(100% - 14px);
@@ -58,26 +65,32 @@ body {
 }
 
 .card__deco {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	overflow: hidden;
-	pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  pointer-events: none;
+  border-radius: 3px;
 }
 
 .card__deco--shine div {
-	position: absolute;
-	width: 200%;
-	height: 200%;
-	top: -50%;
-	left: -50%;
-	background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.9) 0%, rgba(200, 200, 200, 0.05) 50%, transparent 100%);
+  position: absolute;
+  width: 200%;
+  height: 200%;
+  top: -50%;
+  left: -50%;
+  background-image: linear-gradient(
+    45deg,
+    rgba(0, 0, 0, 0.9) 0%,
+    rgba(200, 200, 200, 0.05) 50%,
+    transparent 100%
+  );
 }
 
 figcaption {
-	height: 100%;
+  height: 100%;
   padding: 25px;
   color: #eee;
   font-family: Avenir;
@@ -94,17 +107,42 @@ h1 {
 }
 
 p {
-	margin: 0;
-	font-weight: 900;
+  margin: 0;
+  font-weight: 900;
 }
 
-
 @keyframes fade-in {
-	0% {
-		opacity: 0;
-	}
-	100% {
-		opacity: 1;
-	}
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 
+@media screen and (max-width: 430px) {
+  .card {
+    height: 450px;
+  }
+}
+
+@media screen and (max-width: 380px) {
+  h1 {
+    font-size: 2.8rem;
+    line-height: 2.8rem;
+  }
+}
+
+@media screen and (max-width: 330px) {
+  h1 {
+    font-size: 2rem;
+    line-height: 2rem;
+  }
+}
+
+@media screen and (max-width: 250px) {
+  h1 {
+    font-size: 1.3rem;
+    line-height: 1.3rem;
+  }
+}