figure.snip1104 {
  position: relative;
  overflow: hidden;
  margin: 2.1%;
  width: 15.5%;
  background: #000000;
  color: white;
  text-align: center;
}


figure.snip1104 img {
 width: 100%;
 padding-top: 20px;
}

figure.snip1104 h2 {
  font-size: 23px;
  padding-top: 30px;

  text-transform: uppercase;
}

#footer {
    background:#333;
    padding: 15px;
    width: 1001%;
}


/* Demo purposes only */
html {
  height: 100%;
}

.grid {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: wrap;
 width: 100%;

}

/* Media Queries */


/*IPhone 5/SE*/

@media (max-device-width:320px) and (max-device-height:569px)   
{
figure.snip1104 {
  position: relative;
  overflow: hidden;
  margin: 4%;
  width: 40%;
  color: white;
  text-align: center;
align-items: center;
}
.grid {
  display: flex;
  align-items: center;
 width: 100%;
}
figure.snip1104 img {
 width: 180%;

}

figure.snip1104 h2 {
  font-size: 10px;
  padding-top: 20px;
padding-bottom: 20px;
  text-transform: uppercase;
}    
    
}
/*galaxy S5*/

@media screen and (min-width:350px) and (max-width:370px) and (max-height:640px)  {
figure.snip1104 {
  position: relative;
  overflow: hidden;
  margin: 4%;
  width: 40%;
  color: white;
  text-align: center;
align-items: center;
}
.grid {
  display: flex;
  align-items: center;
 width: 100%;
}
figure.snip1104 img {
 width: 180%;

}

figure.snip1104 h2 {
  font-size: 10px;
  padding-top: 20px;
padding-bottom: 20px;
  text-transform: uppercase;
}
footer {
    background:#333;
    width: 100%;
}

}
/*IPhone 6/7/8*/

@media only screen and (min-width:375px) and (max-height:667px) {
 figure.snip1104 {
  position: relative;
  overflow: hidden;
  margin: 4%;
  width: 40%;
  color: white;
  text-align: center;
align-items: center;
}
.grid {
  display: flex;
  align-items: center;
 width: 100%;
}
figure.snip1104 img {
 width: 180%;

}

figure.snip1104 h2 {
  font-size: 15px;
  padding-top: 20px;
padding-bottom: 20px;
  text-transform: uppercase;
}
footer {
    background:#333;
    width: 100%; 
}
/*Pixel2*/

@media only screen and (min-width:411px)  and (max-height:731px) {
figure.snip1104 {
  position: relative;
  overflow: hidden;
  margin: 4%;
  width: 40%;
  color: white;
  text-align: center;
align-items: center;
}
.grid {
  display: flex;
  align-items: center;
 width: 100%;
}
figure.snip1104 img {
 width: 180%;
}

figure.snip1104 h2 {
  font-size: 15px;
  padding-top: 20px;
padding-bottom: 20px;
  text-transform: uppercase;
}
footer {
    background:#333;
    width: 100%;
}

}
/*Pixel2 XL*/

@media only screen and (max-width:411px) and (min-height:823px)  {

 figure.snip1104 {
  position: relative;
  overflow: hidden;
  margin: 4%;
  width: 40%;
  color: white;
  text-align: center;
align-items: center;
}
.grid {
  display: flex;
  align-items: center;
 width: 100%;
}
figure.snip1104 img {
 width: 180%;
    }
}

figure.snip1104 h2 {
  font-size: 15px;
  padding-top: 20px;
padding-bottom: 20px;
  text-transform: uppercase;
}
footer {
    background:#333;
    width: 100%; 
}

/*IPhone 6/7/8 Plus*/

@media only screen and (min-width:414px) and (max-width:667px) {
figure.snip1104 {
  position: relative;
  overflow: hidden;
  margin: 4%;
  width: 40%;
  color: white;
  text-align: center;
align-items: center;
}
.grid {
  display: flex;
  align-items: center;
 width: 100%;
}
figure.snip1104 img {
 width: 180%;

}

figure.snip1104 h2 {
  font-size: 15px;
  padding-top: 20px;
padding-bottom: 20px;
  text-transform: uppercase;
}
footer {
    background:#333;
    width: 100%;
}

}
}


/*IPhone X*/
@media only screen and (min-width:375px) and (max-width:812px) {
 figure.snip1104 {
  position: relative;
  overflow: hidden;
  margin: 4%;
  width: 40%;
  color: white;
  text-align: center;
align-items: center;
}
.grid {
  display: flex;
  align-items: center;
 width: 100%;
}
figure.snip1104 img {
 width: 180%;

}

figure.snip1104 h2 {
  font-size: 18px;
  padding-top: 20px;
padding-bottom: 20px;
  text-transform: uppercase;
}
footer {
    background:#333;
    width: 100%; 
}
}

/*Ipad*/

 @media only screen and (min-width:768px) and (max-width:950px)  {

     
}


/*Ipad pro*/

@media only screen and (min-width:1000px) and (max-width:1200px)  {
    {}