:root {
	--infoBlue: #2E86DE;
	--infoBlueLight: #EFF6FC;
	--successGreen: #329F5D;
	--successGreenLight: #EFF7F2;
	--errorRed: #C2160A;
	--errorRedLight: #FAEDEC;
	--warningOrange: #FA7F05;
	--warningOrangeLight: #FFF5EB;
	--bodyTextColour: #212121;
}
/* Reset some default styles for better consistency */



.alert {
	margin-block: 2.5rem;
    padding: 1.25rem;
    display: grid;
    grid-gap: 1.25rem;
    grid-template-columns: max-content auto;
    border-radius: 4px;
	border-width: 4px;
	border-left-style: solid;
	transition: 0.12s ease;
	position: relative;
	overflow: hidden;
	&:before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		mix-blend-mode: soft-light;
		background: linear-gradient(90deg, rgba(255,255,255,0) 30%, rgba(255,255,255,1) 56%, rgba(2,0,36,0.1) 82%);
		z-index: 1;
	}
	.icon,.content {
		z-index: 2;
	}
	.icon {
		line-height: 1;
		
	}
	.title {
		font-weight: 700;
		margin-bottom: 0.75rem;
	}
	.content {
		max-width: 60ch;
	}
	&.alert--info {
		background-color: var(--infoBlueLight);
    	border-left-color: var(--infoBlue);
		.icon {
			color: var(--infoBlue);
		}
	}
	&.alert--success {
		background-color: var(--successGreenLight);
    	border-left-color: var(--successGreen);
		.icon {
			color: var(--successGreen);
		}
	}
	&.alert--error {
		background-color: var(--errorRedLight);
    	border-left-color: var(--errorRed);
		.icon {
			color: var(--errorRed);
		}
	}
	&.alert--warning {
		background-color: var(--warningOrangeLight);
    	border-left-color: var(--warningOrange);
		.icon {
			color: var(--warningOrange);
		}
	}
}

@media (max-width: 767px) {
	.alert {
		grid-template-columns: auto;
		padding: 1rem;
		grid-gap: 0.75rem;
		.icon {
			font-size: 1.5rem;
		}
		.title {
			margin-bottom: 0.5rem;
		}
	}
}