/* Embed */
.gallery__item {
  margin-bottom: 0px;
}

.embed {
  overflow: hidden;
  padding-block-start: 100%;
  position: relative;
  cursor: pointer;
  border-radius: 16px;
}

.gallery_image {
  border-radius: 16px;
}

.embed--1-2 {
  padding-top: calc(100% / (1 / 2));
}

.embed--2-1 {
  padding-top: calc(100% / (2 / 1));
}

.embed--2-3 {
  padding-top: calc(100% / (2 / 3));
}

.embed > .gallery__content > * {
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
  margin: 0.25em;
  border-radius: 16px;
}

/* Gallery  */

.gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  /* grid-template-rows: repeat(5, 1fr); */
}

.gallery__label {
  background-color: rgba(255, 255, 255, 0.1);
  color: #021025;
  height: auto;
  width: auto;
  max-height: auto;
  align-self: baseline;
  font-size: 0.85rem;
  transition: 0.5s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.gallery__label > span {
  margin: 0 0 16px 0;
  padding: 4px;
  align-self: flex-start;
  background-color: rgba(255, 255, 255, 0.35);
  transition: background-color 0.5s ease;
  border-radius: 0 4px 4px 0;
}

.gallery__content:hover > .gallery__label {
  /* display: none; */
  background-color: rgba(255, 255, 255, 0);
  font-size: 0.95rem;
}

.gallery__content:hover > .gallery__label > span {
  background: #f5f4f4;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.gallery__item > img {
  block-size: auto;
  max-inline-size: 100%;
  vertical-align: middle;
}

.gallery__item--h-2 {
  grid-column-end: span 2;
}

.gallery__item--h-3 {
  grid-column-end: span 3;
}

.gallery__item--v-2 {
  grid-row-end: span 2;
}

.gallery__item--v-3 {
  grid-row-end: span 3;
}

/* breakpoints */

@media (min-width:20px)  {
  /* anything smaller */
  .gallery {
    grid-template-columns: repeat(1, 1fr);
  }

  .embed--1-2 {
    padding-top: 100%;
  }
  
  .embed--2-1 {
    padding-top: 100%;
  }
  
  .embed--2-3 {
    padding-top: 100%;
  }

  .gallery__item--h-2 {
    grid-column-end: span 1;
  }

  .gallery__item--h-3 {
    grid-column-end: span 1;
  }

  .gallery__item--v-2 {
    grid-row-end: span 1;
  }

  .gallery__item--v-3 {
    grid-row-end: span 1;
  }
}

@media (min-width:280px)  {
  /* smartphones, iPhone, portrait 480x320 phones */
  /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
  .gallery {
    grid-template-columns: repeat(1, 1fr);
  }

  .embed--1-2 {
    padding-top: 100%;
  }
  
  .embed--2-1 {
    padding-top: 100%;
  }
  
  .embed--2-3 {
    padding-top: 100%;
  }

  .gallery__item--h-2 {
    grid-column-end: span 1;
  }

  .gallery__item--h-3 {
    grid-column-end: span 1;
  }

  .gallery__item--v-2 {
    grid-row-end: span 1;
  }

  .gallery__item--v-3 {
    grid-row-end: span 1;
  }
}

@media (min-width:320px)  {
  /* smartphones, iPhone, portrait 480x320 phones */
  /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
  .gallery {
    grid-template-columns: repeat(1, 1fr);
  }

  .embed--1-2 {
    padding-top: 100%;
  }
  
  .embed--2-1 {
    padding-top: 100%;
  }
  
  .embed--2-3 {
    padding-top: 100%;
  }

  .gallery__item--h-2 {
    grid-column-end: span 1;
  }

  .gallery__item--h-3 {
    grid-column-end: span 1;
  }

  .gallery__item--v-2 {
    grid-row-end: span 1;
  }

  .gallery__item--v-3 {
    grid-row-end: span 1;
  }
}

@media (min-width:481px)  {
  /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
  .gallery {
    grid-template-columns: repeat(1, 1fr);
  }

  .gallery__item {
    margin-bottom: 24px;
  }

  .gallery__label > span {
    background-color: rgba(255, 255, 255, 0.9);
  }

  .embed--1-2 {
    padding-top: 100%;
  }
  
  .embed--2-1 {
    padding-top: 100%;
  }
  
  .embed--2-3 {
    padding-top: 100%;
  }

  .gallery__item--h-2 {
    grid-column-end: span 1;
  }

  .gallery__item--h-3 {
    grid-column-end: span 1;
  }

  .gallery__item--v-2 {
    grid-row-end: span 1;
  }

  .gallery__item--v-3 {
    grid-row-end: span 1;
  }
}

@media (min-width:641px)  {
  /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery__item {
    margin-bottom: 24px;
    margin-right: 24px;
  }

  .gallery__label > span {
    background-color: rgba(255, 255, 255, 0.75);
  }
}

@media (min-width:961px)  {
  /* tablet, landscape iPad, lo-res laptops ands desktops */
  .gallery {
    grid-template-columns: repeat(4, 1fr);
  }

  .gallery__item {
    margin: 0px;
  }

  .gallery__label > span {
    background-color: rgba(255, 255, 255, 0.35);
  }

  .embed--1-2 {
    padding-top: calc(100% / (1 / 2));
  }
  
  .embed--2-1 {
    padding-top: calc(100% / (2 / 1));
  }
  
  .embed--2-3 {
    padding-top: calc(100% / (2 / 3));
  }
    
  .gallery__item--h-2 {
    grid-column-end: span 2;
  }

  .gallery__item--h-3 {
    grid-column-end: span 3;
  }

  .gallery__item--v-2 {
    grid-row-end: span 2;
  }

  .gallery__item--v-3 {
    grid-row-end: span 3;
  }
}

@media (min-width:1025px) {
  /* big landscape tablets, laptops, and desktops */
}

@media (min-width:1281px) {
  /* hi-res laptops and desktops */
  .gallery {
    grid-template-columns: repeat(4, 1fr);
  }

  .gallery__item {
    margin: 0px;
  }
}

@media (min-width:1681px) {
  /* hi-res screens */
  .gallery {
    grid-template-columns: repeat(4, 1fr);
  }

  .gallery__item {
    margin: 0px;
  }
}