.categories
{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 20px;
	margin-top: 40px;

	.panel
	{
		border-radius: 20px;
		text-align: center;
		background-position: 50% 50%;
		background-size: contain;
		background-repeat: no-repeat;
		transition: color 200ms;
		display: grid;
		grid-template-columns: 1fr 1fr;
		background-color: #efefef;
		transition: box-shadow 200ms;

		.title
		{
			grid-column: 2;
			grid-row: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			height: 100%;
			font-size: 1.5rem;
			padding-right: 1rem;
			font-weight: 700;
			max-height: 12rem;

			p{
				margin: unset;
			}

			.cta
			{
				font-size: 1rem;
				font-weight: normal;
			}
		}

		.img
		{
			grid-row: 1;
			grid-column: 1;
			width: 100%;
			height: auto;
			max-height: 12rem;

			img
			{
				border-right: 3px solid #3f6eb3;
				border-top-right-radius: 100%;
				border-bottom-right-radius: 100%;
				background-color: white;
				width: 100%;
				height: 100%;
				aspect-ratio: 1/1;
				object-fit: contain;
			}
		}
	}

	.panel:nth-child(3n)
	{
		.img
		{
			img
			{
				border-right: 3px solid magenta;
			}
		}
	}

	.panel:nth-child(3n-1)
	{
		.img
		{
			img
			{
				border-right: 3px solid yellow;
			}
		}
	}

	.panel:hover
	{
		box-shadow: 14px 15px 17px -15px rgba(66, 68, 90, 1);
	}
}

@media screen and (max-width: 1150px)
{
	.categories
	{
		grid-template-columns: 1fr 1fr;
		width: 100%;
	}
}

@media screen and (max-width: 768px)
{
	.categories
	{
		grid-template-columns: 1fr;
		width: 100%;

		.panel
		{

			.img
			{
				max-height: 10rem;
				img
				{
					width: 100%;
				}
			}

			.title
			{
				max-height: 10rem;
			}
		}
	}
}