/* =========================================================== */
/* Configuraciones Generales */
/* =========================================================== */

#ctrlBox {
  z-index: 2;
  width: 100vw;
  height: 100vh;

  top: 0;
  left: 0;
  position: fixed;

  background-color: rgba(0, 0, 0, 0.75);
}

#midDiv {
  padding: 1rem;
  padding-left: 10vw;
  padding-right: 10vw;

  columns: 4;
  margin: auto;
  column-gap: 1rem;
}

/* ============================================= */
/* Cajas de Noticias */
/* ============================================= */
.newsBox + .newsBox {
  margin-top: 1rem;
}

.newsTitle {
  font-size: large;
  padding: 0.5rem;
}

.newsBox {
  width: auto;
  height: 400px;

  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 0rem;

  text-align: left;
  background-color: transparent;

  margin: auto;
  padding: 0rem;
  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
}

.newsBoxImg {
  width: calc(100%);
  height: calc(50%);
  padding: 0rem;
}

.newsImg {
  width: 100%;
  height: 100%;

  object-fit: cover;
  vertical-align: middle;

  background-size: cover;
  background-color: black;
  background-repeat: no-repeat;
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

.newsImg, .newsBoxImg {
  overflow: hidden;
  border: none;
}

.newsBoxDes {
  height: calc(50% - 2rem);
  padding: 1rem;
}

.newsBoxDes div + div {
  margin-top: 0.5rem;
}

.descTop { color: #371005; }
.descMid { color: #a22f37; }
.descBot { color: #2f4858; }

.descTop { width: 100%; overflow: hidden; text-overflow: ellipsis; }
.descMid { width: 100%; overflow: hidden; text-overflow: ellipsis; }
.descBot { width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* =========================================================== */
/* Mobile & Tablet Design */
/* =========================================================== */

/* 320px — 480px: Mobile devices */
/* 481px — 768px: iPads, Tablets */
/* 769px — 1024px: Small screens, laptops */
/* 1025px — 1200px: Desktops, large screens */
/* 1201px and more —  Extra large screens, TV */

@media only screen and (max-width: 1050px) {
  #midDiv {
    padding: 0rem;
    columns: 0;
    display: contents;
  }

  .newsBox {
    height: auto;
    padding: 0rem;
    width: calc(100% - 2rem);
  }

  .newsBox + .newsBox {
    margin-top: 0.5rem;
  }

  .newsBoxImg {
    max-width: 100%;
  }
}