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

/* ############ 8. Gallery ############ */
.gallery {
  max-width: 1200px;
  margin: auto;
}

.gallery h1 {
  text-align: center;
  color: #223055;
  padding: 0 1rem;
  margin-bottom: .5rem;
}

.galleryWrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: .5em;
  grid-auto-flow: row dense; /*This row dense is amazing, it gets rid of huge chunks of white space, caused by minmax setting at 250px
  and tells the grid to ignore source order and flow images around it - when it finds an item to fill a gap, it will do so! Refreshing the page doesn't do anything that's because there are two more lines of code to go with this: attribute selectors */
}

.galleryWrap img[src$="_w.png"] {
	/*This is an attribute selector It looks for a file ending with specific characters*/
	grid-column-end: span 2; /*This tells the grid to span the images ending in _w.png to span 2 columns*/
}

.galleryWrap img[src$="_p.png"] {
	/*This is an attribute selector It looks for a file ending with specific characters*/
	grid-row-end: span 2; /*This tells the grid to span the images ending in _p.png to span 2 rows*/ /*This is all completely respnsive and it is almost what we want but theres a couple more things to tidy up any small gaps in the grid, but it has nothing to do with grid, and that is the three lines of code in galleryWrap img: */
}
/*.galleryWrap img[src$="toto_coelo_l.png"] {
	display:none;
}*/
/*.galleryWrap img[src$="toto_coelo_y.png"] {
	display:unset;
}*/
.galleryWrap img[src$="toto_coelo_l.png"] {  
	display: none;
}
/*.galleryWrap img[src$="toto_coelo_y.png"] {  
	display: none;
}*/
	
.galleryWrap img[src$="bananarama_l.png"] {
	grid-column-end: span 1; 
}

.galleryWrap img {
  width: 100%;
  min-height:100%;  /*!important*/ /*Me:- It's supposed to be height:100%, but now it'll work in chrome 65, but still not working in Opera 49*/
  object-fit: cover; /*slight cropping and or skewing to tidy up*/
  /*background-position: center center;*/
}

@media screen and (min-width: 320px) {

.galleryWrap img[src$="bananarama_l.png"] {
	grid-column-end: span 1; 
}
}
@media screen and (min-width: 510px) {
	
.galleryWrap img[src$="toto_coelo_l.png"] {  
	display: unset;
}
.galleryWrap img[src$="toto_coelo_y.png"] {  
	display: none;
}
}