From b54ef7e829d11fee3140b771dd3da41d23dd8531 Mon Sep 17 00:00:00 2001
From: Nikos Roussos <nikos@roussos.cc>
Date: Fri, 19 Feb 2021 14:35:37 +0200
Subject: [PATCH] Fix stylelint recursive path

stylelint needs a double-quoted path, otherwise it doesn't make a recursive lookup.

Fixed all pending issues stylelint did't report correctly up until now.
---
 .circleci/config.yml                          |   2 +-
 .../blocks/Covers/TakeActionCovers.scss       |   1 -
 .../campaigns/themes/_theme_oceans.scss       |  12 +-
 .../campaigns/themes/_theme_plastic.scss      |   3 +-
 .../vendors/photoswipe/_main-settings.scss    |   6 +-
 .../src/styles/vendors/photoswipe/main.scss   | 260 +++---
 .../styles/vendors/photoswipe/p4-skin.scss    | 779 +++++++++---------
 .../photoswipe/planet4-photoswipe.scss        |   2 +-
 8 files changed, 523 insertions(+), 542 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 9fe24ace2..788d77d34 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -180,7 +180,7 @@ jobs:
       - run:
           name: Lint CSS
           when: always
-          command: stylelint assets/src/**/*.scss
+          command: stylelint "assets/src/styles/**/*.scss"
       - run:
           name: Lint JS
           when: always
diff --git a/assets/src/styles/blocks/Covers/TakeActionCovers.scss b/assets/src/styles/blocks/Covers/TakeActionCovers.scss
index d0232c670..1903c78f4 100644
--- a/assets/src/styles/blocks/Covers/TakeActionCovers.scss
+++ b/assets/src/styles/blocks/Covers/TakeActionCovers.scss
@@ -238,7 +238,6 @@
 }
 
 .cover-card-tag {
-
   --block-covers--card-tag-- {
     color: $yellow;
   }
diff --git a/assets/src/styles/campaigns/themes/_theme_oceans.scss b/assets/src/styles/campaigns/themes/_theme_oceans.scss
index cf4dff57f..2436a17ac 100755
--- a/assets/src/styles/campaigns/themes/_theme_oceans.scss
+++ b/assets/src/styles/campaigns/themes/_theme_oceans.scss
@@ -355,6 +355,11 @@ body.theme-oceans {
   }
 
   .columns-block.block-style-no_image {
+    @include campaign_columns_style_no_image($montserrat, $oceans-blue, 400);
+
+    font-size: 1.875rem;
+    line-height: 2.25rem;
+
     .column-wrap {
       .btn-primary {
         @extend .btn-primary;
@@ -388,13 +393,6 @@ body.theme-oceans {
     }
   }
 
-  .columns-block.block-style-no_image {
-    @include campaign_columns_style_no_image($montserrat, $oceans-blue, 400);
-
-    font-size: 1.875rem;
-    line-height: 2.25rem;
-  }
-
   .video-block {
     @include campaign_video($oceans-aqua);
   }
diff --git a/assets/src/styles/campaigns/themes/_theme_plastic.scss b/assets/src/styles/campaigns/themes/_theme_plastic.scss
index f86afed94..8470c5587 100755
--- a/assets/src/styles/campaigns/themes/_theme_plastic.scss
+++ b/assets/src/styles/campaigns/themes/_theme_plastic.scss
@@ -1,7 +1,8 @@
 :root {
-  --link--color: #BD3DBD;
+  --link--color: #bd3dbd;
   --link-hover--color: #963196;
 }
+
 body.theme-plastic {
   $montserrat: "Montserrat", sans-serif;
 
diff --git a/assets/src/styles/vendors/photoswipe/_main-settings.scss b/assets/src/styles/vendors/photoswipe/_main-settings.scss
index df9dbcd93..79a319548 100644
--- a/assets/src/styles/vendors/photoswipe/_main-settings.scss
+++ b/assets/src/styles/vendors/photoswipe/_main-settings.scss
@@ -2,11 +2,11 @@
 
 $pswp__show-hide-transition-duration: 333ms !default;
 $pswp__controls-transition-duration: 333ms !default;
-$pswp__background-color: rgba(0 ,0 ,0 ,.85) !default;
+$pswp__background-color: rgba(0, 0, 0, .85) !default;
 $pswp__placeholder-color: #111 !default;
 $pswp__box-sizing-border-box: true !default; // disable .pswp * { box-sizing:border-box } (in case you already have it in your site css)
-$pswp__root-z-index: 150000 !default; 
-$pswp__assets-path: '../../public/images/vendors/photoswipe/' !default; // path to skin assets folder (preloader, PNG and SVG sprite)
+$pswp__root-z-index: 150000 !default;
+$pswp__assets-path: "../../public/images/vendors/photoswipe/" !default; // path to skin assets folder (preloader, PNG and SVG sprite)
 $pswp__error-text-color: #111 !default; // "Image not loaded" text color
 $pswp__include-minimal-style: true !default;
 
diff --git a/assets/src/styles/vendors/photoswipe/main.scss b/assets/src/styles/vendors/photoswipe/main.scss
index 7ba11c866..9bb9182aa 100644
--- a/assets/src/styles/vendors/photoswipe/main.scss
+++ b/assets/src/styles/vendors/photoswipe/main.scss
@@ -2,200 +2,200 @@
 
 /* pswp = photoswipe */
 .pswp {
-	display: none;
-	position:absolute;
-	width: 100%;
-	height: 100%;
-	left:0;
-	top:0;
-	overflow: hidden;
-	-ms-touch-action: none;
-	touch-action: none;
-	z-index: $pswp__root-z-index;
-	-webkit-text-size-adjust: 100%;
-	/* create separate layer, to avoid paint on window.onscroll in webkit/blink */
-	-webkit-backface-visibility: hidden;
-	outline: none;
-
-	@if $pswp__box-sizing-border-box == true {
-		* {
-			box-sizing: border-box;
-		}
-	}
-
-	img {
-		max-width: none;
-	}
+  display: none;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  overflow: hidden;
+  -ms-touch-action: none;
+  touch-action: none;
+  z-index: $pswp__root-z-index;
+  -webkit-text-size-adjust: 100%;
+  /* create separate layer, to avoid paint on window.onscroll in webkit/blink */
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  outline: none;
+
+  @if $pswp__box-sizing-border-box == true {
+    * {
+      box-sizing: border-box;
+    }
+  }
+
+  img {
+    max-width: none;
+  }
 }
 
 /* style is added when JS option showHideOpacity is set to true */
 .pswp--animate_opacity {
-	/* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
-	opacity: 0.001;
-	will-change:opacity;
-	/* for open/close transition */
-	transition: opacity $pswp__show-hide-transition-duration cubic-bezier(.4,0,.22,1);
+  /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
+  opacity: 0.001;
+  will-change: opacity;
+  /* for open/close transition */
+  transition: opacity $pswp__show-hide-transition-duration cubic-bezier(.4, 0, .22, 1);
 }
 
 .pswp--open {
-	display: block;
+  display: block;
 }
 
 .pswp--zoom-allowed .pswp__img {
-	/* autoprefixer: off */
-	cursor: -webkit-zoom-in;
-	cursor: -moz-zoom-in;
-	cursor: zoom-in;
+  /* autoprefixer: off */
+  cursor: -webkit-zoom-in;
+  cursor: -moz-zoom-in;
+  cursor: zoom-in;
 }
 
 .pswp--zoomed-in .pswp__img {
-	/* autoprefixer: off */
-	cursor: -webkit-grab;
-	cursor: -moz-grab;
-	cursor: grab;
+  /* autoprefixer: off */
+  cursor: -webkit-grab;
+  cursor: -moz-grab;
+  cursor: grab;
 }
 
 .pswp--dragging  .pswp__img {
-	/* autoprefixer: off */
-	cursor: -webkit-grabbing;
-	cursor: -moz-grabbing;
-	cursor: grabbing;
+  /* autoprefixer: off */
+  cursor: -webkit-grabbing;
+  cursor: -moz-grabbing;
+  cursor: grabbing;
 }
 
 /*
-	Background is added as a separate element.
-	As animating opacity is much faster than animating rgba() background-color.
+  Background is added as a separate element.
+  As animating opacity is much faster than animating rgba() background-color.
 */
+
 .pswp__bg {
-	position: absolute;
-	left: 0;
-	top: 0;
-	width: 100%;
-	height: 100%;
-	background: $pswp__background-color;
-	opacity: 0;
-	transform: translateZ(0);
-	-webkit-backface-visibility: hidden;
-	will-change: opacity;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: $pswp__background-color;
+  opacity: 0;
+  transform: translateZ(0);
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  will-change: opacity;
+  /* for open/close transition */
+  transition: opacity $pswp__show-hide-transition-duration cubic-bezier(.4, 0, .22, 1);
 }
 
 .pswp__scroll-wrap {
-	position: absolute;
-	left: 0;
-	top: 0;
-	width: 100%;
-	height: 100%;
-	overflow:hidden;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
 }
 
 .pswp__container,
 .pswp__zoom-wrap {
-	-ms-touch-action: none;
-	touch-action: none;
-	position: absolute;
-	left: 0;
-	right: 0;
-	top: 0;
-	bottom: 0;
+  -ms-touch-action: none;
+  touch-action: none;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
 }
 
 /* Prevent selection and tap highlights */
 .pswp__container,
 .pswp__img {
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	user-select: none;
-	-webkit-tap-highlight-color: rgba(0,0,0,0);
-	-webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-touch-callout: none;
 }
 
 .pswp__zoom-wrap {
-	position: absolute;
-	width: 100%;
-	-webkit-transform-origin: left top;
-	-moz-transform-origin: left top;
-	-ms-transform-origin: left top;
-	transform-origin: left top;
-	/* for open/close transition */
-	transition: transform $pswp__show-hide-transition-duration cubic-bezier(.4,0,.22,1);
-}
-
-.pswp__bg {
-	will-change: opacity;
-	/* for open/close transition */
-	transition: opacity $pswp__show-hide-transition-duration cubic-bezier(.4,0,.22,1);
+  position: absolute;
+  width: 100%;
+  -webkit-transform-origin: left top;
+  -moz-transform-origin: left top;
+  -ms-transform-origin: left top;
+  transform-origin: left top;
+  /* for open/close transition */
+  transition: transform $pswp__show-hide-transition-duration cubic-bezier(.4, 0, .22, 1);
 }
 
 .pswp--animated-in {
-	.pswp__bg,
-	.pswp__zoom-wrap {
-		-webkit-transition: none;
-		transition: none;
-	}
-}
-
-.pswp__container,
-.pswp__zoom-wrap {
-	-webkit-backface-visibility: hidden;
+  .pswp__bg,
+  .pswp__zoom-wrap {
+    -webkit-transition: none;
+    transition: none;
+  }
 }
 
 .pswp__item {
-	position: absolute;
-	left: 0;
-	right: 0;
-	top: 0;
-	bottom: 0;
-	overflow: hidden;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  overflow: hidden;
 }
 
 .pswp__img {
-	position: absolute;
-	width: auto;
-	height: auto;
-	top: 0;
-	left: 0;
+  position: absolute;
+  width: auto;
+  height: auto;
+  top: 0;
+  left: 0;
 }
 
 /*
-	stretched thumbnail or div placeholder element (see below)
-	style is added to avoid flickering in webkit/blink when layers overlap
+  stretched thumbnail or div placeholder element (see below)
+  style is added to avoid flickering in webkit/blink when layers overlap
 */
+
 .pswp__img--placeholder {
-	-webkit-backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
 }
 
 /*
-	div element that matches size of large image
-	large image loads on top of it
+  div element that matches size of large image
+  large image loads on top of it
 */
+
 .pswp__img--placeholder--blank {
-	background: $pswp__placeholder-color;
+  background: $pswp__placeholder-color;
 }
 
 .pswp--ie .pswp__img {
-	width: 100% !important;
-	height: auto !important;
-	left: 0;
-	top: 0;
+  width: 100% !important;
+  height: auto !important;
+  left: 0;
+  top: 0;
 }
 
 /*
-	Error message appears when image is not loaded
-	(JS option errorMsg controls markup)
+  Error message appears when image is not loaded
+  (JS option errorMsg controls markup)
 */
+
 .pswp__error-msg {
-	position: absolute;
-	left: 0;
-	top: 50%;
-	width: 100%;
-	text-align: center;
-	font-size: 14px;
-	line-height: 16px;
-	margin-top: -8px;
-	color: $pswp__error-text-color;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: 100%;
+  text-align: center;
+  font-size: 14px;
+  line-height: 16px;
+  margin-top: -8px;
+  color: $pswp__error-text-color;
 }
 
 .pswp__error-msg a {
-	color: $pswp__error-text-color;
-	text-decoration: underline;
+  color: $pswp__error-text-color;
+  text-decoration: underline;
 }
diff --git a/assets/src/styles/vendors/photoswipe/p4-skin.scss b/assets/src/styles/vendors/photoswipe/p4-skin.scss
index 82d5aa6ac..4390cb336 100644
--- a/assets/src/styles/vendors/photoswipe/p4-skin.scss
+++ b/assets/src/styles/vendors/photoswipe/p4-skin.scss
@@ -5,14 +5,14 @@
 
 /*
 
-	Contents:
+Contents:
 
-	1. Buttons
-	2. Share modal and links
-	3. Index indicator ("1 of X" counter)
-	4. Caption
-	5. Loading indicator
-	6. Additional styles (root element, top bar, idle state, hidden state, etc.)
+1. Buttons
+2. Share modal and links
+3. Index indicator ("1 of X" counter)
+4. Caption
+5. Loading indicator
+6. Additional styles (root element, top bar, idle state, hidden state, etc.)
 
 */
 
@@ -20,604 +20,587 @@
 
 /*
 
-	1. Buttons
+1. Buttons
 
- */
+*/
 
 /* <button> css reset */
 .pswp__button {
-	width: 44px;
-	height: 44px;
-	position: relative;
-	background: none;
-	cursor: pointer;
-	overflow: visible;
-	-webkit-appearance: none;
-	display: block;
-	border: 0;
-	padding: 0;
-	margin: 0;
-	float: right;
-	opacity: $p4-pswp-button-opacity;
-	transition: opacity 0.2s;
-	box-shadow: none;
-
-	&:focus,
-	&:hover {
-		opacity: 1;
-	}
-
-	&:active {
-		outline: none;
-		opacity: $p4-pswp-button-opacity;
-	}
-
-	&::-moz-focus-inner {
-		padding: 0;
-		border: 0
-	}
+  width: 44px;
+  height: 44px;
+  position: relative;
+  background: none;
+  cursor: pointer;
+  overflow: visible;
+  -webkit-appearance: none;
+  display: block;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  float: right;
+  opacity: $p4-pswp-button-opacity;
+  transition: opacity 0.2s;
+  box-shadow: none;
+
+  &:focus,
+  &:hover {
+    opacity: 1;
+  }
+
+  &:active {
+    outline: none;
+    opacity: $p4-pswp-button-opacity;
+  }
+
+  &::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+  }
 }
 
 /* pswp__ui--over-close class it added when mouse is over element that should close gallery */
 .pswp__ui--over-close .pswp__button--close {
-	opacity: 1;
+  opacity: 1;
 }
 
 .pswp__button,
 .pswp__button--arrow--left:before,
 .pswp__button--arrow--right:before {
-	background: url(#{$pswp__assets-path}default-skin.svg) 0 0 no-repeat;
-	background-size: 264px 88px;
-	width: 44px;
-	height: 44px;
-	border-radius: 44px;
+  background: url(#{$pswp__assets-path}default-skin.svg) 0 0 no-repeat;
+  background-size: 264px 88px;
+  width: 44px;
+  height: 44px;
+  border-radius: 44px;
 }
 
 @media (-webkit-min-device-pixel-ratio: 1.1),  (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
 
-	/* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */
-    .pswp--svg .pswp__button,
-    .pswp--svg .pswp__button--arrow--left:before,
-	.pswp--svg .pswp__button--arrow--right:before {
-        background-image: url(#{$pswp__assets-path}default-skin.svg);
-    }
+  /* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */
+  .pswp--svg .pswp__button,
+  .pswp--svg .pswp__button--arrow--left:before,
+  .pswp--svg .pswp__button--arrow--right:before {
+    background-image: url(#{$pswp__assets-path}default-skin.svg);
+  }
 
-    .pswp--svg .pswp__button--arrow--left,
-	.pswp--svg .pswp__button--arrow--right {
-		background: none;
-	}
+  .pswp--svg .pswp__button--arrow--left,
+  .pswp--svg .pswp__button--arrow--right {
+    background: none;
+  }
 }
 
 .pswp__button--close {
-	background-position: 0 -44px;
+  background-position: 0 -44px;
 }
 
 .pswp__button--share {
-	background-position: -44px -44px;
+  background-position: -44px -44px;
 }
 
 .pswp__button--fs {
-	display: none;
+  display: none;
 }
 
 .pswp--supports-fs .pswp__button--fs {
-	display: block;
+  display: block;
 }
 
 .pswp--fs .pswp__button--fs {
-	background-position: -44px 0;
+  background-position: -44px 0;
 }
 
 .pswp__button--zoom {
-	display: none;
-	background-position: -88px 0;
+  display: none;
+  background-position: -88px 0;
 }
 
 .pswp--zoom-allowed .pswp__button--zoom {
-	display: block;
+  display: block;
 }
 
 .pswp--zoomed-in .pswp__button--zoom {
-	background-position: -132px 0;
+  background-position: -132px 0;
 }
 
 /* no arrows on touch screens */
 .pswp--touch {
-	.pswp__button--arrow--left,
-	.pswp__button--arrow--right {
-		visibility: hidden;
-	}
+  .pswp__button--arrow--left,
+  .pswp__button--arrow--right {
+    visibility: hidden;
+  }
 }
 
 /*
-	Arrow buttons hit area
-	(icon is added to :before pseudo-element)
+Arrow buttons hit area
+(icon is added to :before pseudo-element)
 */
+
 .pswp__button--arrow--left,
 .pswp__button--arrow--right {
-	background: none;
-	top: 50%;
-	margin-top: -50px;
-	width: 70px;
-	height: 100px;
-	position: absolute;
+  background: none;
+  top: 50%;
+  margin-top: -50px;
+  width: 70px;
+  height: 100px;
+  position: absolute;
 }
 
 .pswp__button--arrow--left {
-	left: 0;
+  left: 0;
 }
 
 .pswp__button--arrow--right {
-	right: 0;
+  right: 0;
 }
 
 .pswp__button--arrow--left:before,
 .pswp__button--arrow--right:before {
-	content: '';
-	top: 35px;
-	background-color: $p4-pswp-arrows-background;
-	height: 32px;
-	width: 32px;
-	position: absolute;
-	border-radius: 32px;
+  content: "";
+  top: 35px;
+  background-color: $p4-pswp-arrows-background;
+  height: 32px;
+  width: 32px;
+  position: absolute;
+  border-radius: 32px;
 }
 
 .pswp__button--arrow--left:before {
-	left: 6px;
-	background-position: -138px -44px;
+  left: 6px;
+  background-position: -138px -44px;
 }
 
 .pswp__button--arrow--right:before {
-	right: 6px;
-	background-position: -94px -44px;
+  right: 6px;
+  background-position: -94px -44px;
 }
 
-
 /*
-
-	2. Share modal/popup and links
-
- */
+2. Share modal/popup and links
+*/
 
 .pswp__counter,
 .pswp__share-modal {
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
 }
 
 .pswp__share-modal {
-	display: block;
-	background: rgba(0, 0, 0, 0.5);
-	width: 100%;
-	height: 100%;
-	top: 0;
-	left: 0;
-	padding: 10px;
-	position: absolute;
-	z-index: $pswp__root-z-index + 100;
-	opacity: 0;
-	transition: opacity 0.25s ease-out;
-	-webkit-backface-visibility: hidden;
-	will-change: opacity;
+  display: block;
+  background: rgba(0, 0, 0, 0.5);
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  padding: 10px;
+  position: absolute;
+  z-index: $pswp__root-z-index + 100;
+  opacity: 0;
+  transition: opacity 0.25s ease-out;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  will-change: opacity;
 }
 
 .pswp__share-modal--hidden {
-	display: none;
+  display: none;
 }
 
 .pswp__share-tooltip {
-	z-index: $pswp__root-z-index + 120;
-	position: absolute;
-	background: #FFF;
-	top: 56px;
-	border-radius: 2px;
-	display: block;
-	width: auto;
-	right: 44px;
-	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
-	transform: translateY(6px);
-	transition: transform 0.25s;
-	-webkit-backface-visibility: hidden;
-	will-change: transform;
-
-	a {
-		display: block;
-		padding: 8px 12px;
-		color: #000;
-		text-decoration: none;
-		font-size: 14px;
-		line-height: 18px;
-
-		&:hover {
-			text-decoration: none;
-			color: #000;
-		}
-
-
-		&:first-child {
-			/* round corners on the first/last list item */
-			border-radius: 2px 2px 0 0;
-		}
-
-		&:last-child {
-			border-radius: 0 0 2px 2px;
-		}
-	}
+  z-index: $pswp__root-z-index + 120;
+  position: absolute;
+  background: #fff;
+  top: 56px;
+  border-radius: 2px;
+  display: block;
+  width: auto;
+  right: 44px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
+  transform: translateY(6px);
+  transition: transform 0.25s;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  will-change: transform;
+
+  a {
+    display: block;
+    padding: 8px 12px;
+    color: #000;
+    text-decoration: none;
+    font-size: 14px;
+    line-height: 18px;
+
+    &:hover {
+      text-decoration: none;
+      color: #000;
+    }
+
+    &:first-child {
+      /* round corners on the first/last list item */
+      border-radius: 2px 2px 0 0;
+    }
+
+    &:last-child {
+      border-radius: 0 0 2px 2px;
+    }
+  }
 }
 
 .pswp__share-modal--fade-in {
-	opacity: 1;
+  opacity: 1;
 
-	.pswp__share-tooltip {
-		transform: translateY(0);
-	}
+  .pswp__share-tooltip {
+    transform: translateY(0);
+  }
 }
 
 /* increase size of share links on touch devices */
 .pswp--touch .pswp__share-tooltip a {
-	padding: 16px 12px;
+  padding: 16px 12px;
 }
 
 a.pswp__share--facebook {
-	&:before {
-		content: '';
-		display: block;
-		width: 0;
-		height: 0;
-		position: absolute;
-		top: -12px;
-		right: 15px;
-		border: 6px solid rgba(0, 0, 0, 0);
-		border-bottom-color: #FFF;
-		-webkit-pointer-events: none;
-		-moz-pointer-events: none;
-		pointer-events: none;
-	}
-
-	&:hover {
-		background: #3E5C9A;
-		color: #FFF;
-
-		&:before {
-			border-bottom-color: #3E5C9A;
-		}
-	}
+  &:before {
+    content: "";
+    display: block;
+    width: 0;
+    height: 0;
+    position: absolute;
+    top: -12px;
+    right: 15px;
+    border: 6px solid rgba(0, 0, 0, 0);
+    border-bottom-color: #fff;
+    -webkit-pointer-events: none;
+    -moz-pointer-events: none;
+    pointer-events: none;
+  }
+
+  &:hover {
+    background: #3e5c9a;
+    color: #fff;
+
+    &:before {
+      border-bottom-color: #3e5c9a;
+    }
+  }
 }
 
 a.pswp__share--twitter {
-	&:hover {
-		background: #55ACEE;
-		color: #FFF;
-	}
+  &:hover {
+    background: #55acee;
+    color: #fff;
+  }
 }
 
 a.pswp__share--pinterest {
-	&:hover {
-		background: #CCC;
-		color: #CE272D;
-	}
+  &:hover {
+    background: #ccc;
+    color: #ce272d;
+  }
 }
 
 a.pswp__share--download {
-	&:hover {
-		background: #DDD;
-	}
+  &:hover {
+    background: #ddd;
+  }
 }
 
-
 /*
-
-	3. Index indicator ("1 of X" counter)
-
- */
+3. Index indicator ("1 of X" counter)
+*/
 
 .pswp__counter {
-	position: absolute;
-	left: 0;
-	top: 0;
-	height: 44px;
-	font-size: 13px;
-	line-height: 44px;
-	color: $p4-pswp-counter-text-color;
-	opacity: 0.75;
-	padding: 0 10px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 44px;
+  font-size: 13px;
+  line-height: 44px;
+  color: $p4-pswp-counter-text-color;
+  opacity: 0.75;
+  padding: 0 10px;
 }
 
-
 /*
-
-	4. Caption
-
- */
+4. Caption
+*/
 
 .pswp__caption {
-	position: absolute;
-	left: 0;
-	bottom: 0;
-	width: 100%;
-	min-height: 44px;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  min-height: 44px;
+  background-color: $p4-pswp-caption-background;
 
-	small {
-		font-size: 11px;
-		color: $p4-pswp-caption-text-color;
-	}
+  small {
+    font-size: 11px;
+    color: $p4-pswp-caption-text-color;
+  }
 }
 
 .pswp__caption__center {
-	text-align: center;
-	max-width: 80%;
-	margin: 0 auto;
-	font-size: 13px;
-	padding: 32px 32px 48px 32px;
-	line-height: 20px;
-	color: $p4-pswp-caption-text-color;
+  text-align: center;
+  max-width: 80%;
+  margin: 0 auto;
+  font-size: 13px;
+  padding: 32px 32px 48px 32px;
+  line-height: 20px;
+  color: $p4-pswp-caption-text-color;
 }
 
 .pswp__caption--empty {
-	display: none;
+  display: none;
 }
 
 /* Fake caption element, used to calculate height of next/prev image */
 .pswp__caption--fake {
-	visibility: hidden;
+  visibility: hidden;
 }
 
-
 /*
-
-	5. Loading indicator (preloader)
-
-	You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR
-
- */
+5. Loading indicator (preloader)
+You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR
+*/
 
 .pswp__preloader {
-	width: 44px;
-	height: 44px;
-	position: absolute;
-	top: 0;
-	left: 50%;
-	margin-left: -22px;
-	opacity: 0;
-	transition: opacity 0.25s ease-out;
-	will-change: opacity;
-	direction: ltr;
+  width: 44px;
+  height: 44px;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  margin-left: -22px;
+  opacity: 0;
+  transition: opacity 0.25s ease-out;
+  will-change: opacity;
+  direction: ltr;
 }
 
 .pswp__preloader__icn {
-	width: 20px;
-	height: 20px;
-	margin: 12px;
+  width: 20px;
+  height: 20px;
+  margin: 12px;
 }
 
 .pswp__preloader--active {
-	opacity: 1;
+  opacity: 1;
 
-	.pswp__preloader__icn {
-		/* We use .gif in browsers that don't support CSS animation */
-		background: url(#{$pswp__assets-path}preloader.gif) 0 0 no-repeat;
-	}
+  .pswp__preloader__icn {
+    /* We use .gif in browsers that don't support CSS animation */
+    background: url(#{$pswp__assets-path}preloader.gif) 0 0 no-repeat;
+  }
 }
 
 .pswp--css_animation {
-	.pswp__preloader--active {
-		opacity: 1;
-
-		.pswp__preloader__icn {
-			animation: clockwise 500ms linear infinite;
-		}
-
-		.pswp__preloader__donut {
-			animation: donut-rotate 1000ms cubic-bezier(.4,0,.22,1) infinite;
-		}
-	}
-
-	.pswp__preloader__icn {
-		background: none;
-		opacity: 0.75;
-		width: 14px;
-		height: 14px;
-		position: absolute;
-		left: 15px;
-		top: 15px;
-		margin: 0;
-	}
-
-
-	.pswp__preloader__cut {
-		/*
-			The idea of animating inner circle is based on Polymer ("material") loading indicator
-			 by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
-		*/
-		position: relative;
-		width: 7px;
-		height: 14px;
-		overflow: hidden;
-	}
-
-	.pswp__preloader__donut {
-		box-sizing: border-box;
-		width: 14px;
-		height: 14px;
-		border: 2px solid #FFF;
-		border-radius: 50%;
-		border-left-color: transparent;
-		border-bottom-color: transparent;
-		position: absolute;
-		top: 0;
-		left: 0;
-		background: none;
-		margin: 0;
-	}
+  .pswp__preloader--active {
+    opacity: 1;
+
+    .pswp__preloader__icn {
+      animation: clockwise 500ms linear infinite;
+    }
+
+    .pswp__preloader__donut {
+      animation: donut-rotate 1000ms cubic-bezier(.4, 0, .22, 1) infinite;
+    }
+  }
+
+  .pswp__preloader__icn {
+    background: none;
+    opacity: 0.75;
+    width: 14px;
+    height: 14px;
+    position: absolute;
+    left: 15px;
+    top: 15px;
+    margin: 0;
+  }
+
+  .pswp__preloader__cut {
+    /*
+    The idea of animating inner circle is based on Polymer ("material") loading indicator
+    by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
+    */
+    position: relative;
+    width: 7px;
+    height: 14px;
+    overflow: hidden;
+  }
+
+  .pswp__preloader__donut {
+    box-sizing: border-box;
+    width: 14px;
+    height: 14px;
+    border: 2px solid #fff;
+    border-radius: 50%;
+    border-left-color: transparent;
+    border-bottom-color: transparent;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: none;
+    margin: 0;
+  }
 }
 
 @media screen and (max-width: 1024px) {
-	.pswp__preloader {
-		position: relative;
-		left: auto;
-		top: auto;
-		margin: 0;
-		float: right;
-	}
+  .pswp__preloader {
+    position: relative;
+    left: auto;
+    top: auto;
+    margin: 0;
+    float: right;
+  }
 }
 
 @keyframes clockwise {
-  0% { transform: rotate(0deg) }
-  100% { transform: rotate(360deg) }
-}
+  0% { transform: rotate(0deg); }
 
-@keyframes donut-rotate {
-  0% { transform: rotate(0) }
-  50% { transform: rotate(-140deg) }
-  100% { transform: rotate(0) }
+  100% { transform: rotate(360deg); }
 }
 
+@keyframes donut-rotate {
+  0% { transform: rotate(0); }
 
-/*
+  50% { transform: rotate(-140deg); }
 
-	6. Additional styles
+  100% { transform: rotate(0); }
+}
 
- */
+/*
+6. Additional styles
+*/
 
 /* root element of UI */
 .pswp__ui {
-	-webkit-font-smoothing: auto;
-	visibility: visible;
-	opacity: 1;
-	z-index: $pswp__root-z-index + 50;
+  -webkit-font-smoothing: auto;
+  visibility: visible;
+  opacity: 1;
+  z-index: $pswp__root-z-index + 50;
 }
 
 /* top black bar with buttons and "1 of X" indicator */
 .pswp__top-bar {
-	position: absolute;
-	left: 0;
-	top: 0;
-	height: 44px;
-	width: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 44px;
+  width: 100%;
+  background-color: $p4-pswp-top-bar-background;
 }
 
 .pswp__caption,
 .pswp__top-bar,
 .pswp--has_mouse .pswp__button--arrow--left,
 .pswp--has_mouse .pswp__button--arrow--right {
-	-webkit-backface-visibility: hidden;
-	will-change: opacity;
-	transition: opacity $pswp__controls-transition-duration cubic-bezier(.4,0,.22,1);
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  will-change: opacity;
+  transition: opacity $pswp__controls-transition-duration cubic-bezier(.4, 0, .22, 1);
 }
 
 /* pswp--has_mouse class is added only when two subsequent mousemove events occur */
 .pswp--has_mouse {
-	.pswp__button--arrow--left,
-	.pswp__button--arrow--right {
-		visibility: visible;
-	}
-}
-
-.pswp__top-bar {
-	background-color: $p4-pswp-top-bar-background;
-}
-
-.pswp__caption {
-	background-color: $p4-pswp-caption-background;
+  .pswp__button--arrow--left,
+  .pswp__button--arrow--right {
+    visibility: visible;
+  }
 }
 
 /* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */
 .pswp__ui--fit {
-	.pswp__top-bar {
-		background-color: $p4-pswp-top-bar-background;
-	}
+  .pswp__top-bar {
+    background-color: $p4-pswp-top-bar-background;
+  }
 
-	.pswp__caption {
-		background-color: $p4-pswp-caption-background;
-	}
+  .pswp__caption {
+    background-color: $p4-pswp-caption-background;
+  }
 }
 
 /* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */
-
 .pswp__ui--idle {
-	.pswp__top-bar {
-		opacity: 0;
-	}
+  .pswp__top-bar {
+    opacity: 0;
+  }
 
-	.pswp__button--arrow--left,
-	.pswp__button--arrow--right {
-		opacity: 0;
-	}
+  .pswp__button--arrow--left,
+  .pswp__button--arrow--right {
+    opacity: 0;
+  }
 }
 
 /*
-	pswp__ui--hidden class is added when controls are hidden
-	e.g. when user taps to toggle visibility of controls
+pswp__ui--hidden class is added when controls are hidden
+e.g. when user taps to toggle visibility of controls
 */
+
 .pswp__ui--hidden {
-	.pswp__top-bar,
-	.pswp__caption,
-	.pswp__button--arrow--left,
-	.pswp__button--arrow--right {
-		/* Force paint & create composition layer for controls. */
-		opacity: 0.001;
-	}
+  .pswp__top-bar,
+  .pswp__caption,
+  .pswp__button--arrow--left,
+  .pswp__button--arrow--right {
+    /* Force paint & create composition layer for controls. */
+    opacity: 0.001;
+  }
 }
 
 /* pswp__ui--one-slide class is added when there is just one item in gallery */
 .pswp__ui--one-slide {
-	.pswp__button--arrow--left,
-	.pswp__button--arrow--right,
-	.pswp__counter {
-		display: none;
-	}
+  .pswp__button--arrow--left,
+  .pswp__button--arrow--right,
+  .pswp__counter {
+    display: none;
+  }
 }
 
 .pswp__element--disabled {
-	display: none !important;
+  display: none !important;
 }
 
 @if $pswp__include-minimal-style == true {
-	.pswp--minimal--dark {
-		.pswp__top-bar {
-			background: none;
-		}
-	}
+  .pswp--minimal--dark {
+    .pswp__top-bar {
+      background: none;
+    }
+  }
 }
 
 .p4-photoswipe-indicators-wrapper {
-	padding: 20px 0;
-	width: 100%;
-	left: 0;
-	right: 0;
-	text-align: center;
-	position: absolute;
-	z-index: 9999;
-	/*bottom: 0;*/
-	line-height: 0;
+  padding: 20px 0;
+  width: 100%;
+  left: 0;
+  right: 0;
+  text-align: center;
+  position: absolute;
+  z-index: 9999;
+  /*bottom: 0;*/
+  line-height: 0;
 }
 
 .p4-photoswipe-indicators-wrapper span.p4-photoswipe-indicator-click-area {
-	width: 40px;
-	margin: -4px 8px 0 8px;
-	display: inline-block;
-	padding: 8px 0;
+  width: 40px;
+  margin: -4px 8px 0 8px;
+  display: inline-block;
+  padding: 8px 0;
 }
 
 .p4-photoswipe-indicators-wrapper span.p4-photoswipe-indicator-bar {
-	height: 4px;
-	background: #999999;
-	display: block;
+  height: 4px;
+  background: #999999;
+  display: block;
 }
 
 .p4-photoswipe-indicators-wrapper
 span.p4-photoswipe-indicator-click-area.active
 span.p4-photoswipe-indicator-bar {
-	background: #333333;
+  background: #333333;
 }
 
 .p4-caption-and-indicators {
-    padding: 0;
-    bottom: 0;
-    position: fixed;
-    width: 100%;
-    height: 48px;
-	line-height: 48px;
-	background: white;
-}
\ No newline at end of file
+  padding: 0;
+  bottom: 0;
+  position: fixed;
+  width: 100%;
+  height: 48px;
+  line-height: 48px;
+  background: white;
+}
diff --git a/assets/src/styles/vendors/photoswipe/planet4-photoswipe.scss b/assets/src/styles/vendors/photoswipe/planet4-photoswipe.scss
index 8b43b1b10..83578300d 100644
--- a/assets/src/styles/vendors/photoswipe/planet4-photoswipe.scss
+++ b/assets/src/styles/vendors/photoswipe/planet4-photoswipe.scss
@@ -1,4 +1,4 @@
-// This mimics the Photoswipe setup for its "default skin" here: 
+// This mimics the Photoswipe setup for its "default skin" here:
 // https://github.com/dimsemenov/PhotoSwipe/tree/v4.1.3/src/css
 @import "main-settings";
 @import "main";