@charset "utf-8";
/* CSS Document */

body {
	font-size: calc(0.75em + 2vmin);
	background: #000036;
}

p {
	color: white;
}

.categories a {
	color:white;
	text-decoration: none;
	display:inline-block;
	line-height: 1.2;
}

.banner {
    padding-top: 4rem;
    padding-right: 2rem;
    padding-left: 4px;
    padding-bottom: 4rem;
    /* grid styles */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	  grid-gap: 1rem;
  }
.banner img:nth-child(1) {
	width:30%;
}

.banner	img:nth-child(3) {
	width:60%;
}

.categories > ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  grid-gap: 1rem;
	list-style-type: none;
}


ul ul li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: white; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
	margin-bottom: 1em;
}



.categories ul li figure img {
	width:300px;
	height:180px; 	
	object-fit: cover;
}

#cse {
	width: 100%;	
}


@media 	screen and (max-device-width: 600px) {

	.categories > ul {
		grid-template-columns: repeat(auto-fit, minmax(700px, 1fr));
		}
	.banner {
		 grid-template-columns: repeat(auto-fit, minmax(700px, 1fr));
		}
	.categories ul li figure img {
	width:600px;
	height:360px; 	
	object-fit: cover;
	}
}