/* <modules> */
@media (min-width: 1200px)
{
  #modules_content
  {
    width: 78%;
    margin-left: 11%;
    margin-right: 11%;
  }

  .section_modules
  {
    width: calc(100% / 4);
  }
}

@media (max-width:1200px)
{
  #modules_content
  {
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
  }

  .section_modules
  {
    width: calc(100% / 3);
  }
}

@media (min-width:768px)
{
  .part_modules
  {
    border-radius: 15px;
  }

  .modules_title
  {
    border-radius: 15px 15px 0px 0px;
    font-size: 28px;
  }
}

@media (max-width:768px)
{
  #modules_content
  {
    width: 84%;
    margin-left: 8%;
    margin-right: 8%;
  }

  .section_modules
  {
    width: calc(100% / 1);
  }

  .part_modules
  {
    border-radius: 12px;
  }

  .modules_title
  {
    border-radius: 12px 12px 0px 0px;
    font-size: 26px;
  }
}

@media (max-width:320px)
{
  #modules_content
  {
    width: 250px;
    margin-left: 35px;
    margin-right: 35px;
  }
}

#modules_content
{
  border: 1px solid #B7B7B7;
  background-color: #FFFFFF;
  margin-top: 1vh;
  margin-bottom: 4vh;
  padding-bottom: 160px;
}

.container_modules
{
  padding-left: 22px;
  padding-right: 0px;
  padding-top: 22px;
  padding-bottom: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: auto;
  margin-right: auto;
}

.row_modules
{
  margin-left: 0px;
  margin-right: 0px;
}

.section_modules
{
  aspect-ratio: 1 / 1.2;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-left: 0px;
  padding-right: 22px;
  padding-top: 0px;
  padding-bottom: 22px;
}

.part_modules
{
  width: 100%;
  height: 100%;
  border: 1px solid #B7B7B7;
  transition-duration: 300ms;
  cursor: pointer;
}

.part_modules:hover
{
  border: 1px solid #404040;
}

/* .part_modules:hover .image_module
{
  display: none;
} */

.part_modules:hover .description_container_hover
{
  display: block;
}

.modules_title
{
  display: flex;
  align-items: center;
  background-color: #E7E7E4;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  color: #000000;
  height: 18%;
  text-decoration-color: #E7E7E4;
  padding-left: 36px;
  transition-duration: 300ms;
  border-bottom: 1px solid #B7B7B7;
}

.modules_image
{
  padding-top: 7%;
  padding-bottom: 7%;
  padding-left: 6%;
  padding-right: 6%;
  height: 82%;
  width: 100%;
}

.image_module
{
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}

.dark_hover_bg
{
  background-color: rgb(0, 0, 0);
  opacity: 0.5;
  width: 100%;
  height: 100%;
  position: absolute; 
  object-fit: cover;
}

.description_title
{
  color: white;
  width: 80%;
  left: 10%;
  white-space: pre-wrap;
  position: relative;
  font-family: 'Roboto Mono', monospace;
  text-align: center;
  object-fit: cover;
  font-weight: bold;
}

.description_text
{
  color: white;
  /* white-space: pre-wrap; */
  width: 80%;
  position: relative;
  font-family: 'Roboto Mono', monospace;
  left: 10%;
  font-size: 14px;
  object-fit: cover;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6; /* Number of lines to show before cutting off */
  overflow: hidden;
  text-overflow: ellipsis;
}

.description_container_hover
{
  position: relative;
  bottom: 100%;
  width: 100%;
  height: 100%;
  display: none;
  object-fit: cover;
}

/* TODO somehow take from module-specific .css file */
#modules_BBG:hover .modules_title
{
  border-bottom: 1px solid #404040;
  background-color: #48e4b5;
  color: #FFFFFF;
}

#modules_SSH:hover .modules_title
{
  border-bottom: 1px solid #404040;
  background-color: #409c06;
  color: #FFFFFF;
}

#slim_cables:hover .modules_title
{
  border-bottom: 1px solid #404040;
  background-color: #9148e4;
  color: #FFFFFF;
}

#robust_cables:hover .modules_title
{
  border-bottom: 1px solid #404040;
  background-color: #9148e4;
  color: #FFFFFF;
}

#lamp:hover .modules_title
{
  border-bottom: 1px solid #404040;
  background-color: #9148e4;
  color: #FFFFFF;
}

#merch_hat:hover .modules_title
{
  border-bottom: 1px solid #404040;
  background-color: #9148e4;
  color: #FFFFFF;
}
/* </modules> */