/* $url-images: "https://cdn.pixabay.com/photo/2019/08/22/14/14/sunset-4423621_1280.jpg",
  "https://cdn.pixabay.com/photo/2019/09/10/22/05/mountains-4467436_1280.jpg",
  "https://cdn.pixabay.com/photo/2018/03/29/07/35/water-3271579_1280.jpg",
  "https://cdn.pixabay.com/photo/2019/11/21/00/05/mountains-4641428_1280.jpg",
  "https://cdn.pixabay.com/photo/2017/04/19/10/47/amalfi-2241861_1280.jpg",
  "https://cdn.pixabay.com/photo/2019/10/16/05/37/alpine-4553488_1280.jpg",
  "https://cdn.pixabay.com/photo/2019/11/23/03/08/valley-4646114_1280.jpg",
  "https://cdn.pixabay.com/photo/2015/10/04/06/52/mountain-970704_1280.jpg",
  "https://cdn.pixabay.com/photo/2019/06/24/16/43/mountain-4296464_1280.jpg";
 */

 /* * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
} */

body {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  margin:0%;
  padding:0%;
  background-color: darkkhaki;
  overflow: auto;
} 

/* Contiene galeria: es hijo de seccion2 */
.container:nth-child(2) {
  order: 0;
  flex: 0 1 auto;
  align-self: auto;
}

/* Conteendor padre: contiene toda la galeria de fotos */
.container {
  width: 98%;
  margin: 1%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: center;
  align-items: center;
}

/* Hijo de container */
.gallery__card-container:nth-child(1){
  order: 0;
  flex: 0 1 auto;
  align-self: auto;
  width: 100%;
}

/* Contiene cada una de las divisiones con las fotos */
.gallery__card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

/* .gallery__title {
  margin: 50px 0;
  font-size: 3rem;
  text-transform: uppercase;
} */

.gallery__card:nth-child(1){
  order: 0;
  flex: 0 1 auto;
  align-self: auto;
}

/* Divisiones que contienen cada foto */
.gallery__card {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  min-width: 50vmin;
  height: 45vmin;
  margin: 5px 5px;
  background: #f4f1bb;
  background-size: 100%;
  background-position: top left;
  transition: background-position 2s;
  cursor: pointer;
}

/* Fotos dentro de la galeria */
.gallery_foto:nth-child(1){
    min-width: 50vmin;
    height: auto;
    transition: background-position 2s;
    cursor: pointer;
}
/* 
@each $el in $url-images {
  $i: index($url-images, $el);
  .gallery__card:nth-child(#{$i}) {
    background-image: url("#{$el}");
  }
} */

.gallery__card:hover{
    background-position: bottom left;
  }
.gallery_foto:hover {
  background-position: bottom left;
}

@media screen and (max-width: 301px) {
  .gallery__card {
    min-width: 100%;
    }
}