.hover-description-container{

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;

  justify-content: center;
}

.hover-description-parent{
  display: flex;
  flex-direction: column;

  width: clamp(0px, 100vw / 5, 1920px / 5);

  overflow: hidden;
}

.hover-description-parent:hover .hover-description-label{
  background-color: white;
  color:black;
}

.hover-description-parent:hover .hover-description{
  top:0px;
}

.hover-description-image-container{
  height: clamp(0px, 100vw / 4, 1920px / 4);
  position:relative;
}

.hover-description-label{
  z-index:1;

  transition-property: all;
  transition-duration: 0.4s;

  background-color: var(--primary-color);
  color:white;
  text-align: center;
  padding: 20px;

  font-size: clamp(0px, 0.7vw, 18px);

  font-weight: 500;

  font-size: 13px;

  white-space: nowrap;
}

img.hover-description-image{
  width:100%;
  height:100%;
  object-fit: cover;
}

.hover-description{
  transition-property: top;
  transition-duration: 0.4s;

  position:absolute;

  top:-100%;

  height:100%;

  color: white;
  background-color: rgba(0,0,0,0.6);
  text-align: left;
  padding:10px;

  overflow: hidden;

  width: 100%;
}

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

.hover-description-container{
  flex-wrap: wrap;
}

.hover-description-parent{
  width: clamp(0px, 100vw / 4, 1920px / 4);
}

.hover-description-image-container{
  height: clamp(0px, 100vw / 3, 1920px / 3);
}

.hover-description-label{
    font-size: clamp(8px, 1.3vw, 18px);
}

}

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

.hover-description-container{
  flex-wrap: wrap;
}

.hover-description-parent{
  width: clamp(0px, 100vw / 3, 1920px / 3);
}

.hover-description-image-container{
  height: clamp(0px, 100vw / 2.5, 1920px / 2.5);
}

.hover-description-label{
    font-size: clamp(8px, 1.3vw, 18px);
}

}

@media only screen and (min-width: 0px) and (max-width: 480px){

.hover-description-container{
  flex-wrap: wrap;
}

.hover-description-parent{
  width: clamp(0px, 50vw, 1920px);
}

.hover-description-image-container{
  height: clamp(0px, 100vw / 1.2, 1920px / 1.2);
}

.hover-description-label{
    font-size: clamp(8px, 3vw, 18px);
}

}