/**
 * Widget: Call To Action boxes
 */
.widget-cta {
	
	.cta-box {
		position: relative;
		margin-bottom: 28px;
	}
	
	a, 
	img {
		display: block;
	}
	
	img {
		@include breakpoint(medium) {
			width: 100%;
			max-width: initial;
		}
	}
	
	.label {
		z-index: 1;
		position: absolute;
		top: 50%;
		left: 50%;
		max-width: 95%; // May not apply at all
		text-align: center;
		transform: translateY(-50%) translateX(-50%);
		padding: 7px 18px;
		border: 1px solid #fff;
		
		background: #fff;
		color: #111;
		
		font-family: $title-font;
		font-size: 13px;
		font-weight: 500;
		line-height: 1.5;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		transition: all 0.3s ease-in;
	}
	
	// Better sharpness on windows with grid
	@supports (display: grid) {
		.cta-box > a {
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: 1fr;
		}

		img,
		.label {
			grid-column: 1/1;
			grid-row: 1/1;
		}

		.label {
			position: initial;
			max-width: initial;
			transform: none;
			align-self: center;
			justify-self: center;
		}
	}
}