@penskemediacorp/larva-css 1.6.0-alpha.0 → 1.6.0

package/src/02-algorithms/a-hover-dropup/a-hover-dropup.common.async.scss

@@ -2,16 +2,16 @@
 
 @include pmc-breakpoint( tablet ) {
 
-	.pmc-a-hover-dropup\@tablet {
+	.lrv-a-hover-dropup\@tablet {
 		position: relative;
 		min-width: 14rem;
 	}
 
-	.pmc-a-hover-dropup-trigger\@tablet {
+	.lrv-a-hover-dropup-trigger\@tablet {
 		cursor: pointer;
 	}
 
-	.pmc-a-hover-dropup-target\@tablet {
+	.lrv-a-hover-dropup-target\@tablet {
 		width: 100%;
 		visibility: hidden;
 		opacity: 0;
@@ -24,15 +24,15 @@
 		max-height: 8.438rem;
 	}
 
-	.pmc-a-hover-dropup\@tablet:hover .pmc-a-hover-dropup-target\@tablet,
-	.pmc-a-hover-dropup\@tablet:focus .pmc-a-hover-dropup-target\@tablet {
+	.lrv-a-hover-dropup\@tablet:hover .lrv-a-hover-dropup-target\@tablet,
+	.lrv-a-hover-dropup\@tablet:focus .lrv-a-hover-dropup-target\@tablet {
 		visibility: visible;
 		opacity: 1;
 	}
 	
 	// Transform a-icon
-	.pmc-a-hover-dropup\@tablet:hover .a-icon-arrow-down::after,
-	.pmc-a-hover-dropup\@tablet:focus .a-icon-arrow-down {
+	.lrv-a-hover-dropup\@tablet:hover .lrv-a-icon-arrow-down::after,
+	.lrv-a-hover-dropup\@tablet:focus .lrv-a-icon-arrow-down {
 		--a-icon-transform: rotate(180deg);
 	}
 }

package/src/02-algorithms/a-hover-dropup/a-hover-dropup.html

@@ -9,9 +9,9 @@
 </head>
 <body>
 	<div style="height:300px"></div>
-	<div class="pmc-a-hover-dropup@tablet">
-		<div class="pmc-a-hover-dropup-trigger@tablet">Hover me to show the list above</div>
-		<div class="pmc-a-hover-dropup-target@tablet">
+	<div class="lrv-a-hover-dropup@tablet">
+		<div class="lrv-a-hover-dropup-trigger@tablet">Hover me to show the list above</div>
+		<div class="lrv-a-hover-dropup-target@tablet">
 			<ul>
 				<li>List item 1</li>
 				<li>List item 2</li>

package/src/02-algorithms/a-hover-effect/a-hover-effect.common.async.scss

@@ -0,0 +1,25 @@
+@import 'setup';
+
+.lrv-a-hover-effect {
+	transition: var( --a-hover-effect-property, $transition-hover );
+}
+
+.lrv-a-hover-effect--fade {
+	transform: translate3d( 0px, 0px, 0px ); // stylelint-disable-line unit-disallowed-list
+}
+
+.lrv-a-hover-effect--fade:hover {
+	--a-hover-effect-property: opacity;
+
+	opacity: 0.5;
+}
+
+.lrv-a-hover-effect--underline {
+	transform: translate3d( 0px, 0px, 0px ); // stylelint-disable-line unit-disallowed-list
+}
+
+.lrv-a-hover-effect--underline:hover {
+	--a-hover-effect-property: border-bottom;
+
+	border-bottom: 1px solid currentColor;
+}

package/src/02-algorithms/a-hover-effect/a-hover-effect.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<title>Document</title>
+	<link rel="stylesheet" href="../../../build/css/algorithms.common.async.css">
+	<link rel="stylesheet" href="../../../build/css/utilities.common.inline.css">
+</head>
+<body>
+	<div class="lrv-a-hover-effect lrv-a-hover-effect--fade lrv-u-display-inline-block">
+		<img src="http://placehold.it/300x300" alt="">
+	</div>
+</body>
+</html>

package/src/02-algorithms/a-icon/a-icon.common.async.scss

@@ -1,11 +1,36 @@
-@import '@penskemediacorp/larva-scss/dist/tools';
+@import 'setup';
 
-.a-icon-after-remove\@tablet::after {
+.lrv-a-icon-after-remove\@tablet::after {
 	@include pmc-breakpoint( tablet ) {
 		display: none;
 	}
 }
 
-.a-icon-invert {
+.lrv-a-icon-invert {
 	--a-icon-filter: invert(1);
+}
+
+.lrv-a-icon-arrow-left,
+.lrv-a-icon-arrow-right,
+.lrv-a-icon-arrow-down,
+.lrv-a-icon-arrow-up {
+	--a-icon-url: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M13.7 1.7l-6 6c-.2.2-.4.3-.7.3-.3 0-.5-.1-.7-.3l-6-6C-.1 1.3-.1.7.3.3s1-.4 1.4 0L7 5.6 12.3.3c.4-.4 1-.4 1.4 0s.4 1 0 1.4z'/%3E%3C/svg%3E" );
+	--a-icon-height: #{ $font-size-12 };
+}
+
+.lrv-a-icon-arrow-right {
+	--a-icon-transform: rotate(-90deg);
+}
+
+.lrv-a-icon-arrow-left {
+	--a-icon-transform: rotate(90deg);
+}
+
+.lrv-a-icon-envelope {
+	--a-icon-url: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M.77.945C.636.875.406.752.356.605.269.357.362.258.731.258h12.723c.37 0 .462.096.376.349-.05.143-.28.27-.416.34-.366.192-5.45 2.964-5.64 3.064-.19.1-.382.146-.681.146-.3 0-.493-.047-.683-.146C6.22 3.91 1.137 1.138.77.945zm12.934.15c.296-.15.276.023.276.163v6.82c0 .307-.39.696-.716.696H.921c-.326 0-.782-.386-.782-.695V1.258c0-.136.016-.313.31-.163.272.14 2.747 1.883 4.368 2.931L2.085 7.104c-.066.066-.096.15-.056.186.04.04.13.02.196-.046l3.28-2.769c.496.32.842.54.905.573.257.13.436.146.683.146.246 0 .425-.017.682-.146.06-.034.409-.253.905-.573l3.28 2.769c.07.063.156.083.196.046.037-.04.007-.12-.06-.186L9.363 4.026c1.62-1.048 4.069-2.791 4.342-2.931z'/%3E%3C/svg%3E" );
+	--a-icon-height: #{ $font-size-10 };
+}
+
+.lrv-a-icon-search {
+	--a-icon-url: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M5.228 11.335h.79l.28-.27a6.471 6.471 0 01-1.57-4.23 6.5 6.5 0 116.5 6.5c-1.61 0-3.09-.59-4.23-1.57l-.27.28v.79l-5 4.99-1.49-1.49 4.99-5zm6 0c2.49 0 4.5-2.01 4.5-4.5s-2.01-4.5-4.5-4.5-4.5 2.01-4.5 4.5 2.01 4.5 4.5 4.5z' fill-rule='evenodd'/%3E%3C/svg%3E" );
 }

package/src/02-algorithms/a-icon/a-icon.common.inline.scss

@@ -1,7 +1,4 @@
-@import '@penskemediacorp/larva-scss/dist/tokens';
-@import '@penskemediacorp/larva-scss/dist/tools';
-
-$ICONS_BUILD_PATH: '/svgs';
+@import 'setup';
 
 @mixin _a-icon-base {
 	content: var(--a-icon-content, '');
@@ -12,6 +9,7 @@ $ICONS_BUILD_PATH: '/svgs';
 	height: var(--a-icon-height, #{ $spacer-1 });
 	width: var(--a-icon-width, #{ $spacer-1 });
 	transform: var( --a-icon-transform, none );
+	flex-shrink: 0;
 }
 
 @mixin _a-icon-base-pseudo( $pseudo-el ) {
@@ -31,7 +29,7 @@ $ICONS_BUILD_PATH: '/svgs';
 		height: initial;
 		width: initial;
 		// background okay for reset.
-		background: initial; // stylelint-disable-line property-blacklist
+		background: initial; // stylelint-disable-line property-disallowed-list
 		font-size: inherit;
 		color: currentColor;
 		margin: 0;
@@ -40,50 +38,31 @@ $ICONS_BUILD_PATH: '/svgs';
 	}
 }
 
-.a-icon {
+.lrv-a-icon {
 	@include _a-icon-base();
 }
 
-.a-icon-before {
+.lrv-a-icon-before {
 	@include _a-icon-base-pseudo( before ) {
 		margin-right: $spacer-050;
 	}
 }
 
-.a-icon-after {
+.lrv-a-icon-after {
 	@include _a-icon-base-pseudo( after ) {
 		margin-left: $spacer-050;
 	}
 }
 
-.a-icon-after\:margin-l-auto::after {
+.lrv-a-icon-after\:margin-l-auto::after {
 	margin-left: auto;
 }
 
 // Specific Icons
 
-.a-icon-arrow-left,
-.a-icon-arrow-right,
-.a-icon-arrow-down,
-.a-icon-arrow-up {
-	--a-icon-url: url( #{$ICONS_BUILD_PATH + '/stack/svg/sprite.stack.svg#arrow'} );
-	--a-icon-height: #{ $font-size-12 };
-}
-
-.a-icon-arrow-right {
-	--a-icon-transform: rotate(-90deg);
-}
-
-.a-icon-arrow-left {
-	--a-icon-transform: rotate(90deg);
-}
-
-.a-icon-envelope {
-	--a-icon-url: url( #{$ICONS_BUILD_PATH + '/stack/svg/sprite.stack.svg#envelope'} );
-}
-
-.a-icon-forward-slash,
-.a-icon-bullet {
+.lrv-a-icon-forward-slash,
+.lrv-a-icon-bullet,
+.lrv-a-icon-vertical-pipe {
 	@include _a-icon-reset( before ) {
 		padding-right: $spacer-050;
 	};
@@ -93,51 +72,50 @@ $ICONS_BUILD_PATH: '/svgs';
 	};
 }
 
-.a-icon-forward-slash {
+.lrv-a-icon-forward-slash {
 	--a-icon-content: '/';
 }
 
-.a-icon-bullet {
+.lrv-a-icon-bullet {
 	--a-icon-content: '\02022';
 }
 
-	// // ----------
-// // Special Instance for Footer Dropdown Toggle Arrow
-// // ----------
-
-// // @TODO: Move a-icon-after-down to one-offs or an algorithm called a-border-icon / a-toggle-icon.
-// .a-icon-after-down {
-// 	position: relative;
-// 	display: flex;
-// 	align-items: center;
-// 	flex-wrap: nowrap;
-// 	padding-right: $spacer-025;
-
-// 	&::after {
-// 		content: '';
-// 		margin-left: auto;
-// 		width: 0.75rem;
-// 		height: 0.75rem;
-// 		transform: scaleY(0.85) translate(-50%,-50%) rotate(45deg);
-// 		border: 0.125rem solid;
-// 		border-left: none;
-// 		border-top: none;
-// 		transition: transform 225ms cubic-bezier(0.4,0,0.2,1);
-// 	}
-// }
-
-// .a-icon-after-down-hide\@mobile {
-// 	@include breakpoint( mobile ) {
-// 		display: block;
-
-// 		&::after {
-// 			display: none;
-// 		}
-// 	}
-// }
-
-// .a-icon-after-down--has-toggle {
-// 	&::after {
-// 		transform: scaleY(-0.85) translate(-50%,25%) rotate(45deg);
-// 	}
-// }
+.lrv-a-icon-vertical-pipe {
+	--a-icon-content: '\007C';
+	padding-right: $spacer-025;
+}
+
+.lrv-a-icon-after-arrow-top-left {
+	&::before {
+		position: absolute;
+		content: '';
+		display: block;
+		width: pmc-rem(24);
+		height: pmc-rem(24);
+		left: 13%;
+		border: 2px solid map-get( $TOKENS-MAP, color-black );
+		border-right-color: transparent;
+		border-bottom-color: transparent;
+		transform: rotate( 45deg );
+		top: pmc-rem(-12);
+		background-color: $color-white;
+	}
+}
+
+.lrv-a-icon-after-arrow-top-right {
+	&::before {
+		position: absolute;
+		content: '';
+		display: block;
+		width: pmc-rem(24);
+		height: pmc-rem(24);
+		right: 13%;
+		border: 2px solid map-get( $TOKENS-MAP, color-black );
+		border-right-color: transparent;
+		border-bottom-color: transparent;
+		transform: rotate( 45deg );
+		top: pmc-rem(-12);
+		background-color: $color-white;
+	}
+}
+

package/src/02-algorithms/a-screen-reader-only/a-screen-reader-only.common.inline.scss

@@ -0,0 +1,30 @@
+@import '@penskemediacorp/larva-scss/dist/tools';
+
+@mixin _a-screen-reader-only-base {
+	border: 0;
+	clip: rect(1px, 1px, 1px, 1px); // stylelint-disable-line unit-disallowed-list
+	clip-path: inset(50%);
+	height: 1px; // stylelint-disable-line unit-disallowed-list
+	margin: -1px; // stylelint-disable-line unit-disallowed-list
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	width: 1px; // stylelint-disable-line unit-disallowed-list
+	word-wrap: normal;
+}
+
+.lrv-a-screen-reader-only {
+	@include _a-screen-reader-only-base;
+}
+
+.lrv-a-screen-reader-only\@mobile-max {
+	@include pmc-breakpoint( mobile-max ) {
+		@include _a-screen-reader-only-base();
+	}
+}
+
+.lrv-a-screen-reader-only\@desktop-xl {
+	@include pmc-breakpoint( desktop-xl ) {
+		@include _a-screen-reader-only-base();
+	}
+}

package/src/02-algorithms/a-scrollable-grid/a-scrollable-grid.common.inline.scss

@@ -0,0 +1,52 @@
+// Scrollable Grid
+//
+// The scrollable grid. Parent should be overflow hidden and a width of 100%.
+
+@import 'setup';
+
+:root {
+	--scrollable-grid-column-size: calc( 5vw + #{pmc-rem( 220 )} );
+}
+
+@mixin _a-scrollable-grid {
+	-webkit-overflow-scrolling: touch;
+
+	display: flex;
+	flex-wrap: nowrap;
+
+	> * {
+		width: 100%;
+		min-width: calc( 1vw + #{pmc-rem( 260 )} );
+		margin-right: $spacer-150;
+	}
+
+	@supports ( display: grid ) {
+		> * {
+			width: unset;
+			min-width: unset;
+			margin-right: unset;
+		}
+
+		display: grid;
+		grid-auto-flow: column;
+		grid-template-columns: unset; // Override what is coming from pmc-a-grid.
+		grid-auto-columns: var( --scrollable-grid-column-size ); // Set in constants.scss.
+	}
+}
+
+.lrv-a-scrollable-grid\@desktop-max {
+
+	@include pmc-breakpoint( desktop-max ) {
+		overflow-x: scroll;
+	}
+
+}
+
+.lrv-a-scrollable-grid\@desktop-max,
+.lrv-a-scrollable-grid__nested\@desktop-max {
+
+	@include pmc-breakpoint( desktop-max ) {
+		@include _a-scrollable-grid;
+	}
+
+}

package/src/02-algorithms/a-show-on-hover/a-show-on-hover.common.inline.scss

@@ -0,0 +1,16 @@
+@import 'setup';
+
+.lrv-a-show-on-hover {
+	opacity: 0;
+	visibility: hidden;
+	position: absolute;
+	top: 100%;
+	left: 0;
+	transition: opacity $transition-hover;
+}
+
+.lrv-a-show-on-hover-parent:hover .lrv-a-show-on-hover,
+.lrv-a-show-on-hover-parent:focus-within .lrv-a-show-on-hover {
+	opacity: 1;
+	visibility: visible;
+}

package/src/02-algorithms/a-space-children/a-space-children.common.inline.scss

@@ -1,56 +1,127 @@
 @import '@penskemediacorp/larva-scss/dist/tokens';
 @import '@penskemediacorp/larva-scss/dist/tools';
 
-// Tokens Stub
-$spacer-050: 0.5;
-$spacer-1:   1;
-$spacer-2:   2;
-
 :root {
 	--a-space-children-spacer: 0;
 }
 
 @mixin _a-space-children-horizontal {
-	margin-left: $spacer-050 + rem;
+	margin-left: 0.50rem;
 	margin-left: calc( var( --a-space-children-spacer ) * 1rem );
 }
 
 @mixin _a-space-children-vertical {
-	margin-top: $spacer-050 + rem;
+	margin-top: 0.50rem;
 	margin-top: calc( var( --a-space-children-spacer ) * 1rem );
 }
 
 // stylelint-disable selector-max-compound-selectors
-.pmc-a-space-children-horizontal > * + * {
+.lrv-a-space-children-horizontal > * + * {
 	@include _a-space-children-horizontal();
 }
 
-.pmc-a-space-children-horizontal\@tablet > * + * {
+.lrv-a-space-children-horizontal\@mobile-max > * + * {
+	@include pmc-breakpoint( mobile-max ) {
+		@include _a-space-children-horizontal();
+	}
+}
+
+.lrv-a-space-children-horizontal\@tablet > * + * {
 	@include pmc-breakpoint( tablet ) {
 		@include _a-space-children-horizontal();
 	}
 }
 
-.pmc-a-space-children-vertical > * + * {
+.lrv-a-space-children-horizontal\@desktop-max > * + * {
+	@include pmc-breakpoint( desktop-max ) {
+		@include _a-space-children-horizontal();
+	}
+}
+
+.lrv-a-space-children-horizontal\@desktop-xl > * + * {
+	@include pmc-breakpoint( desktop-xl ) {
+		@include _a-space-children-horizontal();
+	}
+}
+
+.lrv-a-space-children-vertical > * + * {
 	@include _a-space-children-vertical();
 }
 
-.pmc-a-space-children-vertical\@mobile-max > * + * {
+.lrv-a-space-children-vertical\@mobile-max > * + * {
 	@include pmc-breakpoint( mobile-max ) {
 		@include _a-space-children-vertical();
 	}
 }
 
+.lrv-a-space-children-vertical\@tablet > * + * {
+	@include pmc-breakpoint( tablet ) {
+		@include _a-space-children-vertical();
+	}
+}
+
+.lrv-a-space-children-vertical\@desktop > * + * {
+	@include pmc-breakpoint( desktop ) {
+		@include _a-space-children-vertical();
+	}
+}
+
 // stylelint-enable selector-max-compound-selectors
 
-.pmc-a-space-children--050 {
-	--a-space-children-spacer: #{$spacer-050};
+.lrv-a-space-children--050 {
+	--a-space-children-spacer: 0.50;
+}
+
+.lrv-a-space-children--1 {
+	--a-space-children-spacer: 1;
+}
+
+.lrv-a-space-children--150 {
+	--a-space-children-spacer: 1.5;
+}
+
+.lrv-a-space-children--2 {
+	--a-space-children-spacer: 2;
+}
+
+.lrv-a-space-children--3 {
+	--a-space-children-spacer: 3;
+}
+
+.lrv-a-space-children--2\@desktop-xl {
+	@include pmc-breakpoint( desktop-xl ) {
+		--a-space-children-spacer: 2;
+ 	}
 }
 
-.pmc-a-space-children--1 {
-	--a-space-children-spacer: #{$spacer-1};
+.lrv-a-space-children--1\@desktop-xl-max {
+	@include pmc-breakpoint( desktop-xl-max ) {
+		--a-space-children-spacer: 1;
+ 	}
+}
+
+.lrv-a-space-children--3\@desktop-xl {
+	@include pmc-breakpoint( desktop-xl ) {
+		--a-space-children-spacer: 3;
+ 	}
+}
+
+.lrv-a-space-children--4\@desktop {
+
+	@include pmc-breakpoint( desktop ) {
+		--a-space-children-spacer: 4;
+	}
+}
+
+.lrv-a-space-children--5\@desktop {
+
+	@include pmc-breakpoint( desktop ) {
+		--a-space-children-spacer: 5;
+	}
 }
 
-.pmc-a-space-children--2 {
-	--a-space-children-spacer: #{$spacer-2};
+.lrv-a-space-children--0\@desktop-xl {
+	@include pmc-breakpoint( desktop-xl ) {
+		--a-space-children-spacer: 0;
+ 	}
 }

package/src/02-algorithms/a-truncate-ellipsis/a-truncate-ellipsis.common.async.scss

@@ -0,0 +1,71 @@
+@import 'setup';
+
+.lrv-a-truncate-ellipsis {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+@mixin _a-truncate-ellipsis($line: 1) {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-line-clamp: $line;
+	-webkit-box-orient: vertical; // stylelint-disable-line property-no-vendor-prefix
+}
+
+.lrv-a-truncate-ellipsis-1line {
+	@include _a-truncate-ellipsis(1);
+}
+
+.lrv-a-truncate-ellipsis-2line {
+	@include _a-truncate-ellipsis(2);
+}
+
+.lrv-a-truncate-ellipsis-3line {
+  	@include _a-truncate-ellipsis(3);
+}
+
+.lrv-a-truncate-ellipsis-5line {
+	@include _a-truncate-ellipsis(5);
+}
+
+.lrv-a-truncate-ellipsis-6line {
+	@include _a-truncate-ellipsis(6);
+}
+
+.lrv-a-truncate-ellipsis-3line\@desktop-xl {
+	@include pmc-breakpoint( desktop-xl ) {
+		@include _a-truncate-ellipsis(3);
+	}
+}
+
+.lrv-a-truncate-ellipsis-4line\@mobile-max {
+	@include pmc-breakpoint(desktop-xl-max) {
+		@include _a-truncate-ellipsis(4);
+	}
+}
+
+.lrv-a-truncate-ellipsis-5line\@tablet-desktop-only {
+	@media only screen and (max-width: $screen-desktop-xl) and (min-width: $screen-tablet) {
+		@include _a-truncate-ellipsis(5);
+	}
+}
+
+.lrv-a-truncate-ellipsis-5line\@desktop-xl-max {
+	@include pmc-breakpoint(desktop-xl-max) {
+		@include _a-truncate-ellipsis(5);
+	}
+}
+ 
+.lrv-a-truncate-ellipsis-1line\@tablet-desktop-only {
+	@media only screen and (max-width: $screen-desktop-xl) and (min-width: $screen-tablet) {
+		@include _a-truncate-ellipsis(1);
+	}
+}
+
+.lrv-a-truncate-ellipsis-2line\@mobile-max {
+	@include pmc-breakpoint(mobile-max) {
+		@include _a-truncate-ellipsis(2);
+	}
+}

package/src/02-algorithms/a-unstyle-button/a-unstyle-button.common.inline.scss

@@ -1,7 +1,6 @@
-.pmc-a-unstyle-button {
-	border: 0;
+.lrv-a-unstyle-button {
+	border-width: 0;
 	background-color: transparent;
-	display: block;
 	font-family: inherit;
 	font-size: inherit;
 	line-height: inherit;

package/src/02-algorithms/a-unstyle-link/a-unstyle-link.common.inline.scss

@@ -0,0 +1,7 @@
+.lrv-a-unstyle-link,
+.lrv-a-unstyle-link:hover,
+.lrv-a-unstyle-inner-links > a {
+	color: currentColor;
+	text-decoration: none;
+}
+

package/src/02-algorithms/a-unstyle-list/a-unstyle-list.common.inline.scss

@@ -1,4 +1,4 @@
-.pmc-a-unstyle-list {
+.lrv-a-unstyle-list {
 	list-style-type: none;
 	padding-left: 0;
 	margin-top: 0;

package/src/02-algorithms/a-wrapper/a-wrapper.common.inline.scss

@@ -1,5 +1,17 @@
-.pmc-a-wrapper {
-	max-width: var( --site-max-width );
+@import 'setup';
+
+.lrv-a-wrapper {
+	max-width: $screen-desktop-xl;
+	max-width: var( --site-max-width, #{$screen-desktop-xl} );
 	margin-left: auto;
 	margin-right: auto;
+	padding-left: $spacer-050;
+	padding-right: $spacer-050;
+}
+
+.lrv-a-wrapper-100vw\@mobile-max {
+	@include pmc-breakpoint( mobile-max ) {
+    	width: 100vw;
+    	margin-left: calc(50% - 50vw);
+	}	
 }