Template:Knowledge Base/styles.css

   .grid-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
            padding: 15px;
        }

        .grid-item {
            background-color: white;
            padding: 20px;
            text-align: center;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            margin: 25px 0;
        }

        .grid-item h3 {
            margin-bottom: 15px;
            font-size: 1.2rem;
        }

        .grid-item .image-container {
            width: 100%;
            height: 180px;
            background-size: cover;
            background-position: center;
            border-radius: 6px;
        }

        @media (max-width: 1024px) {
            .grid-container {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 600px) {
            .grid-container {
                grid-template-columns: repeat(1, 1fr);
            }
        }



.test-image{
	background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/PNG_Test.png/800px-PNG_Test.png');
}



.kb-container {
	display: block;
	text-align: center;
}

.console-image img {
	max-width: 200px;
	height: auto;
}

@media screen and (min-width: 851px) {
	.kb-container {
		display: grid;
		grid-auto-columns: minmax(0, 1fr);
	}
	
	.kb-console1 { grid-column: 1; }
	.kb-console2 { grid-column: 2; }
	.kb-console3 { grid-column: 3; }
	.kb-console4 { grid-column: 4; }
	
	.kb-console1,
	.kb-console2, 
	.kb-console3,
	.kb-console4 {
		border-right: 1px solid #a2a9b1;
	}
	
	.kb-console1 {
		border-left: 1px solid #a2a9b1;
	}
	
	.console-header      { grid-row: 1; }
	.console-image       {
		grid-row: 2;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.console-guide-link  { grid-row: 3; }
}

@media screen and (min-width: 202px) and (max-width: 850px) {
	
	.console-image img {
		max-width: 100px;
		height: auto;
	}

	.kb-container {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
	
	.kb-console1 { grid-column: 1; }
	.kb-console2 { grid-column: 2; }
	.kb-console3 { grid-column: 3; }
	.kb-console4 { grid-column: 4; }
	
	.kb-console1,
	.kb-console2, 
	.kb-console3,
	.kb-console4 {
		border-right: 1px solid #a2a9b1;
	}
	
	.kb-console1 {
		border-left: 1px solid #a2a9b1;
	}
	
	.console-header      { grid-row: 1; }
	.console-image       {
		grid-row: 2;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.console-guide-link  { grid-row: 3; }
}