/* Some very basic styles... You should likely overwrite these with your own to suit your needs */

/* Responsive Images */

.photo-albums img,
.photo-items img {
  height: auto;
  max-width: 100%;
    
}


/* Photo Albums */

.photo-albums {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: repeat(1, minmax(100px, 1fr));
}

/* Photo Items */

.photo-items {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: repeat(3, minmax(100px, 1fr));
  margin-bottom: 60px;
    
}

.photo-item {
 width:210px;
    height:210px;
    overflow: hidden; 
    transition: all 0.8s ease;
}

.photo-album__thumb {
    width:690px;
    height:300px;
    overflow: hidden; 
    transition: all 0.8s ease;
}

.photo-item:focus, .photo-item:hover{
  box-shadow: 0px 0px 0px 6px #006699, 0px 0px 8px 12px rgba(255, 255, 255, 0.6);
  
}

img.photo-item__thumb:focus, img.photo-item__thumb:hover{
    transform: scale(1.3);
    transition: all 0.5s ease;
}