How to resolve overlap content with icon in tiles issue in a responsive design through CSS

See more:

CSS

CSS3

I am having 4 + 1 tiles or cards in my web page. In all cards, there is an icon and centered text. It looks fine in full screen but when I resize the page, the icon of each card gets overlapped with the text. Here is an image:

.cardlayout {
	display: grid;
	grid-template-columns: 2fr 2fr 2fr 2fr;
	grid-area: cardlayout;
	grid-gap: 10px;
}
.cardlayout > div {
	text-align: center;
	font-size: 1.87rem;
}
.card{
  overflow-y: auto;
}
.card ul{
	position: relative;
	padding: 0;
  	margin: 0;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	height: auto;
}
.card ul li{
  list-style: none;
  float: left;
  width: 100%;
  height: 200px;
  background: var(--tile_item_back_color);
}

.card ul li .tileheading1{
	width: 100%;
	height: 50px;
	line-height: 45px;
	background: var(--tile_head_back_color);
	text-align: center;
	white-space: nowrap;
	text-decoration: none;
	color: var(--tile_head_fore_color);
	font-weight: bold;
	font-size: 1rem;
}
.card ul li .tileheading1::before{
	content:url(product.svg);
	position: absolute;
	white-space: nowrap;
  	top: 10px;
  	left: 5px;
}

.card ul li .tileheading2{
	width: 100%;
	height: 50px;
	line-height: 45px;
	background: var(--tile_head_back_color);
	text-align: center;
	text-decoration: none;
	color: var(--tile_head_fore_color);
	font-weight: bold;
	font-size: 1rem;
}
.card ul li .tileheading2::before{
	content:url(videos.svg);
	position: absolute;
  	top: 10px;
  	left: 5px;
}
.card ul li .tileheading3{
	width: 100%;
	height: 50px;
	line-height: 45px;
	background: var(--tile_head_back_color);
	text-align: center;
	text-decoration: none;
	color: var(--tile_head_fore_color);
	font-weight: bold;
	font-size: 1rem;
}
.card ul li .tileheading3::before{
	content:url(community.svg);
	position: absolute;
  	top: 10px;
  	left: 5px;
}
.card ul li .tileheading4{
	width: 100%;
	height: 50px;
	line-height: 45px;
	background: var(--tile_head_back_color);
	text-align: center;
	text-decoration: none;
	color: var(--tile_head_fore_color);
	font-weight: bold;
	font-size: 1rem;
}
.card ul li .tileheading4::before{
	content:url(resources.svg);
	position: absolute;
  	top: 10px;
  	left: 5px;
}
.card a{
	padding: 5px;
	text-decoration: none;
	font-size: 0.90rem;
	color: var(--tile_head_fore_color);
	display: block;
	transition: 0.3s;
	margin-left: 20px;
	margin-right: 20px;
	border-bottom: 1px solid var(--item_divider_color);
	text-transform: none;
	text-align: left;
}

.card a:hover {
	background-color: var(--item_hover_back_color);
}

What I have tried:

I would like to hide the icon when anyone resizes the window. I tried white-space, overflow: hidden but nothing worked out so far for me.