responsive layout with popup slider

_scss/helpers/utilities.scss

@@ -0,0 +1,133 @@
+// General box-sizing
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+
+// Margin reset for texts
+h1, h2, p, ul {
+  margin: 0;
+}
+
+
+// General Typography
+body {
+  color: $dark-gray;
+  font-family: $base-font-family;
+  font-size: 16px;
+  font-weight: 400;
+}
+
+
+// General container
+.container {
+  width: 100%;
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-right: auto;
+  margin-left: auto;
+}
+@media (min-width: 768px) {
+  .container {
+    max-width: 750px;
+  }
+}
+@media (min-width: 992px) {
+  .container {
+    max-width: 980px;
+  }
+}
+
+
+// General button
+.btn-main {
+  display: inline-block;
+  font-weight: 600;
+  color: $white;
+  text-align: center;
+  vertical-align: middle;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-color: $royal-blue;
+  border: 1px solid $royal-blue;
+  padding: 1.8em 3.4em;
+  font-size: 12px;
+  letter-spacing: 1px;
+  line-height: 1.5;
+  border-radius: 50rem;
+  transition: all .3s ease;
+  text-decoration: none;
+  &:hover {
+    background-color: lighten($royal-blue, 5%);
+  }
+}
+
+
+// Text utility classes
+.content-text {
+  font-family: $text-font-family;
+  font-size: 22px;
+  line-height: 1.5;
+  @media (max-width: 768px) {
+    font-size: 18px;
+  }
+}
+
+.text-black {
+  color: $black;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.ls-40 {
+  letter-spacing: .4px;
+}
+
+
+// Spacing utility classes
+.mb-2 {
+  margin-bottom: 24px;
+}
+
+
+// Arrows classes
+[class*="icono"] {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  color: $white;
+  box-sizing: border-box;
+  &:after, &:before {
+    content: "";
+    box-sizing: border-box;
+  }
+}
+[class*="icono-arrow"]{
+  width: 20px;
+  height: 20px;
+  border-width: 4px 4px 0 0;
+  border-style: solid;
+  margin: 10px;
+  &:before{
+    right: 0;
+    top: -3px;
+    position: absolute;
+    height: 4px;
+    box-shadow: inset 0 0 0 32px;
+    transform: rotate(-45deg);
+    width: 23px;
+    transform-origin: right top;
+  }
+  &[class*="-left"]{
+    transform: rotate(45deg);
+  }
+  &[class*="-right"]{
+    transform: rotate(-135deg);
+  }
+}