#gwel-admin-panel-wrapper {
	width: 90%;
	max-width: 1170px;
	padding: 5%;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 20px;
	.gwel-item {
		padding: 60px;
		border-radius: 12px;
		min-height: 200px;
	}
	.gwel-item-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		height: 100%;
		font-size: 18px;
		line-height: 1.6em;
		gap: 12px;
	}
	.gwel-title {
		font-size: 24px;
		margin: 0;
	}
	.gwel-link {
		margin-top: 30px;
		text-decoration: none;
		color: inherit;
		font-weight: 200;
		font-size: 18px;
		&.gwel-btn-link {
			color: #ffffff;
			background-color: #000000;
			padding: 12px 24px;
			border-radius: 6px;
		}
		&:hover {
			text-decoration: underline;
		}
	}
	.gwel-intro {
		color: #fff;
		font-size: 24px;
		line-height: 1.6em;
		font-weight: 200;
		grid-column: 1 / span 12;
		background-color: #000000;
		background-image: url('../images/admin/welcome-intro.jpg');
		background-position: center;
		background-size: cover;
		padding-top: 90px;
		padding-bottom: 90px;
		.gwel-item-content {
			max-width: 590px;
			gap: 24px;
			font-size: 24px;
		}
		.gwel-logo {
			height: 50px;
			svg {
				width: auto;
				height: 100%;
				display: block;
			}
		}
	}
	.gwel-widgets {
		grid-column: 1 / span 7;
		color: #000000;
		background-color: #D3E65B;
	}
	.gwel-support {
		grid-column: 8 / span 5;
		color: #ffffff;
		background-color: #219FEE;
	}
	.gwel-tutorials {
		grid-column: 1 / span 5;
		color: #000000;
		background-color: #E7E7E7;
	}
	.gwel-templates {
		grid-column: 6 / span 7;
		color: #ffffff;
		background-color: #000000;
		background-image: url('../images/admin/welcome-templates.jpg');
		background-position: center;
		background-size: cover;
	}
	.gwel-footer {
		grid-column: 1 / span 12;
		background-color: #000000;
		padding: 20px 30px;
		border-radius: 6px;
		.gwel-item-content {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			color: #fff;
			max-width: none;
			svg {
				fill: currentColor;
			}
			a {
				color: currentColor;
			}
		}
	}

	@media screen and (max-width: 1150px) {
		.gwel-item {
			padding: 40px;
		}
		.gwel-item-icon {
			height: 40px;
		}
	}
	@media screen and (max-width: 860px) {
		.gwel-item {
			grid-column: 1 / span 6;
		}
		.gwel-support {
			grid-column: 1 / span 3;
		}
		.gwel-tutorials {
			grid-column: 4 / span 3;
		}
	}
	@media screen and (max-width: 768px) {
		.gwel-item {
			background-image: none;
			grid-column: 1 / span 6;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.gwel-item-content {
			align-items: center;
			text-align: center;
		}
	}
}