quick refactor CTA area

- style title
- better centering through flexbox
- mobile first approach

assets/css/ascribe.css

@@ -2182,19 +2182,32 @@ header + .chevron-divider {
     line-height: 31px;
   }
 }
-.sign-up {
+.cta {
-  padding: 240px 0 210px;
+  padding: 20px 0;
+  min-height: 300px;
   text-align: center;
   background-size: cover;
   background-repeat: no-repeat;
+  background-position: 55% 50%;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
-.sign-up a {
+.cta .cta__title {
+  color: #fff;
+  margin: 0 0 48px 0;
+}
+.cta .cta__button {
   margin: 0 auto;
 }
-@media screen and (max-width: 600px) {
+@media screen and (min-width: 600px) {
-  .sign-up {
+  .cta {
-    background-position: 55% 50%;
+    padding: 40px 0;
-    padding: 180px 0 140px;
+    min-height: 520px;
+    background-position: center;
   }
 }
 .galleries-marketplaces {
@@ -2336,6 +2349,10 @@ header + .chevron-divider {
   line-height: 22px;
   margin-top: 2px;
 }
+.team.tour-page {
+  padding: 70px 0;
+  background-color: #fbfbfb;
+}
 @media screen and (max-width: 600px) {
   .team-member {
     width: 50%;

assets/css/less/ascribe.less

@@ -887,21 +887,42 @@ header + .chevron-divider {
 		}
 	}
 }
+
+
+//
+// Component: CTA section
+//
 .cta {
-	padding: 240px 0 210px;
+    // TODO: this padding value should come from more general component like .section or global variable
+    padding: 20px 0;
+    min-height: 300px;
 	text-align: center;
 	background-size: cover;
 	background-repeat: no-repeat;
+    background-position: 55% 50%;
 
-	a {
+    // centering from the future
+    display: flex;
+    align-items: center;
+
+    .cta__title {
+        color: #fff;
+        margin: 0 0 48px 0;
+    }
+
+	.cta__button {
 		margin: 0 auto;
 	}
-	@media screen and (max-width: @phoneWidth) {
-		background-position: 55% 50%;
-		padding: 180px 0 140px;
-	}
 
+	@media screen and (min-width: @phoneWidth) {
+        padding: 40px 0;
+        min-height: 520px;
+        background-position: center;
+	}
 }
+
+
+
 .galleries-marketplaces {
 	padding: 145px 0 130px;
 	text-align: center;

controller/classes/Subtemplate.php

@@ -304,8 +304,8 @@ class Subtemplate {
 
 		$result = "<section class='subtemplate cta' style='background-image: url({$backgroundImg})'>
 						<div class='centered-content'>
-                            <h1>{$ctaTitle}</h1>
+                            <h1 class='cta__title'>{$ctaTitle}</h1>
-							<div><a href='{$ctaLink}' class='button blue-overPic'>{$ctaText}</a></div>
+							<a href='{$ctaLink}' class='cta__button button blue-overPic'>{$ctaText}</a>
 						</div>
 					</section>";