.ccl-v2-widget.enews-signup {
	margin: 0 auto;
	background: url(../svg/energy_enewsletter.svg) no-repeat top 36% left;
    background-size: 70%;
	width: calc(100% - 30px);
    max-width: calc(var(--width-base) - 30px);
	
	.widget-header {
		margin: 0;
	}

	.title-col {
		max-width: 100%;
		justify-items: center;
	}

	.widget-title {
		font-size: 1.375rem;
		line-height: 1.15;
		color: var(--text-color);
		text-align: center;
	}

	.widget-desc {
		margin: 0;
		font-family: var(--font-body);
		font-size: var(--text-base);
		line-height: 1.3;
		color: var(--text-grey);
		text-align: center;
	}

	.widget-view-all {
		font-family: var(--font-bold);
		font-size: var(--text-sm);
		text-transform: uppercase;
		text-decoration: none;
		transition: color var(--transition-appendix);
		letter-spacing: 0.1em;
		color: var(--white);
		margin: 0 auto;
		display: grid;
		grid-template-columns: auto auto;
		justify-content: center;
		align-items: center;
		gap: 10px;
		padding: 17px 23px;
		clip-path: polygon(100% 92.66%, 4.10% 100%, 0% 0%, 96.99% 4.59%, 100% 92.66%);
		background-color: var(--sw-key-color);

		&::after {
			content: '\f054';
			font-family: "Font Awesome 6 Pro";
			font-size: .6875rem;
			font-weight: 900;
		}
	}

	.widget-inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20px;
		max-width: var(--width-base);
		margin: 0 auto;

		.slides {
			display: grid;
            grid-template-columns: 310px 268px;
            grid-template-columns: 52.5% 45.5%;
            align-items: end;
            max-width: 590px;
            gap: var(--space-3);
			padding: 0 0 0 10px;

			.slide {
				&.first {
					clip-path: polygon(18% 0%,100% 0%,100% 100%,0% 100%);
				}

				&.second {
					clip-path: polygon(0% 0%,100% 12%,100% 100%,0% 100%);
				}

				&.third {
					clip-path: polygon(0% 0%,100% 0%,100% 100%,17% 100%);
					align-self: flex-start;
					justify-self: flex-end;

					img {
						max-height: 241px;
						max-height: 241px;
                        width: auto;
					}
				}

				&.fourth {
					clip-path: polygon(0% 0%,100% 0%,100% 85%,0.00% 100.00%);
					align-self: flex-start;
				}
			}
		}
	}
}

@media (hover: hover) {
	.ccl-v2-widget.enews-signup .widget-view-all:hover {
		background: var(--dark-pink);
	}
}

@media (min-width: 64em) {
    .ccl-v2-widget.enews-signup {
		background: url(../svg/energy_enewsletter.svg) no-repeat bottom 27% left;
    	background-size: 460px 333px;
		max-width: 1140px;

		.title-col {
			justify-items: flex-start;
		}

		.widget-title {
			font-size: 4.0625rem;
			text-align: left;
		}

		.widget-desc {
			font-size: var(--text-lg);
			text-align: left;
		}

		.widget-inner {
			display: grid;
			grid-template-columns: 55% 45%;
			gap: 50px;

			.slides {
				padding: 0;
			}
		}
	}
}