.gap-news {
  /*! margin: 20px auto; */
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  grid-template-rows: 400px 400px 400px;
  /* gap: 10px 10px; */
  padding-top: 47;
  /* padding-bottom: 47; */
}

.gap-news form button {
  position: absolute;
  bottom: 0px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), #000000c7);
  padding-right: 0px;
  margin-right: 0px;
  margin-left: 0px;
  right: 0px;
  left: 0;

  /*border-radius: 0px 0px 10px 10px;*/
  width: 100%;
  height: 100%;
}

.gap-news .gap-news-title {
  position: absolute;
  bottom: 0px;
  padding-right: 0px;
  margin-right: 0px;
  margin-left: 0px;
  right: 0px;
  left: 0;
  padding: 10px;
  padding-top: 112;
  border-style: none;
}

.gap-news .news1 .gap-news-title .news1-title,
.gap-news .news2 .gap-news-title .news2-title,
.gap-news .news3 .gap-news-title .news3-title,
.gap-news .news4 .gap-news-title .news4-title,
.gap-news .news5 .gap-news-title .news5-title,
.gap-news .news6 .gap-news-title .news6-title,
.gap-news .news7 .gap-news-title .news7-title {
  color: white;
  text-align: right;
  padding-right: 12px;
  line-height: 1.6;
  font-size: 15px;
  transition: 0.5s;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}

.gap-news .news1 .gap-news-title .news1-title,
.gap-news .news2 .gap-news-title .news2-title,
.gap-news .news3 .gap-news-title .news3-title,
.gap-news .news4 .gap-news-title .news4-title,
.gap-news .news5 .gap-news-title .news5-title,
.gap-news .news6 .gap-news-title .news6-title,
.gap-news .news7 .gap-news-title .news7-title {
  color: white;
  text-align: right;
  padding-right: 12px;
  line-height: 1.6;
  font-size: 15px;
  transition: 0.5s;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
  direction: rtl;
  margin-bottom: 6px;
  font-weight: bolder;
}

.gap-news .news1 .gap-news-title .news1-date,
.gap-news .news2 .gap-news-title .news2-date,
.gap-news .news3 .gap-news-title .news3-date,
.gap-news .news4 .gap-news-title .news4-date,
.gap-news .news5 .gap-news-title .news5-date,
.gap-news .news6 .gap-news-title .news6-date,
.gap-news .news7 .gap-news-title .news7-date {
  color: white;
  text-align: right;
  padding-right: 12px;
  font-size: 11px;
  transition: 0.5s;
  font-weight: 600;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: bolder;
}

.gap-news .news1 {
  position: relative;
  color: white;
  grid-column: 2 / span 7;
  /* box-shadow: 2px 2px 11px #00000042; */
  transition: 0.5s;
  margin: 0px;
}

.gap-news .news1:hover {
  opacity: 0.9;
  box-shadow: 0px 0px black;
  font-weight: bold;
}

.gap-news .news2 {
  position: relative;
  color: white;
  padding: 20px;
  grid-column: 9 / span 11;
  grid-row: 2/3;
  /*box-shadow: 2px 2px 11px #00000042;*/
  transition: 0.5s;
  margin: 0px;
}

.gap-news .news7 {
  position: relative;
  color: white;
  padding: 20px;
  grid-column: 9 / span 11;
  grid-row: 1/2;
  /*box-shadow: 2px 2px 11px #00000042;*/
  transition: 0.5s;
  margin: 0px;
}

.gap-news .news2:hover {
  opacity: 0.9;
  /*box-shadow: 0px 0px black;*/
  font-weight: bold;
}

.gap-news .news7:hover {
  opacity: 0.9;
  /*box-shadow: 0px 0px black;*/
  font-weight: bold;
}

.gap-news .news3 {
  position: relative;
  color: white;
  padding: 20px;
  grid-column: 2 / span 7;
  /* box-shadow: 2px 2px 11px #00000042;*/
  transition: 0.5s;
  margin: 0px;
}

.gap-news .news3:hover {
  opacity: 0.9;
  box-shadow: 0px 0px black;
  font-weight: bold;
}

.gap-news .news4 {
  position: relative;
  color: white;
  padding: 20px;
  grid-column: 2 / span 7;
  /*box-shadow: 2px 2px 11px #00000042;*/
  transition: 0.5s;
}

.gap-news .news4:hover {
  opacity: 0.9;
  /*box-shadow: 0px 0px black;*/
  font-weight: bold;
}

.gap-news .news5 {
  position: relative;
  color: white;
  padding: 20px;
  grid-column: 9 / span 6;
  /* box-shadow: 2px 2px 11px #00000042;*/
  transition: 0.5s;
}

.gap-news .news5:hover {
  opacity: 0.9;
  /*box-shadow: 0px 0px black;*/
  font-weight: bold;
}

.gap-news .news6 {
  color: white;
  position: relative;
  padding: 20px;
  grid-column: 15 / span 5;
  /*box-shadow: 2px 2px 11px #00000042;*/
  transition: 0.5s;
}

.gap-news .news6:hover {
  opacity: 0.9;
  /*box-shadow: 0px 0px black;*/
  font-weight: bold;
}

.flex-news {
  display: flex;
  flex-direction: column;
  background-color: #f0f0f0;
}

/* CSS FOR RESPONSIVE */

@media only screen and (min-width: 2000px) and (max-width: 3560px) {
  .flex-news {
    padding-left: 310px;
    padding-right: 310;
  }
}

@media only screen and (max-width: 991px) {
  /*phone*/

  .gap-news {
    display: flex;
    flex-direction: column;
    gap: 0px;
    padding-top: 0px;
  }

  .gap-news .news1 {
    height: 700px;
    margin-bottom: 0px;
  }

  .gap-news .news2 {
    height: 700px;
    margin-bottom: 0px;
    background-repeat: round;
  }

  .gap-news .news7 {
    height: 700px;
    margin-bottom: 0px;
    background-repeat: round;
  }

  .gap-news .news3 {
    height: 700px;
    margin-bottom: 0px;
  }

  .gap-news .news4 {
    height: 700px;
    margin-bottom: 0px;
  }

  .gap-news .news5 {
    height: 700px;
    margin-bottom: 0px;
  }

  .gap-news .news6 {
    height: 700px;
    margin-bottom: 0px;
  }

  .gap-news .news1 .gap-news-title .news1-title,
  .gap-news .news2 .gap-news-title .news2-title,
  .gap-news .news3 .gap-news-title .news3-title,
  .gap-news .news4 .gap-news-title .news4-title,
  .gap-news .news5 .gap-news-title .news5-title,
  .gap-news .news6 .gap-news-title .news6-title,
  .gap-news .news7 .gap-news-title .news7-title {
    color: white;
    text-align: right;
    padding-right: 12px;
    line-height: 1.6;
    font-size: 27px;
    transition: 0.5s;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    direction: rtl;
    font-weight: bolder;
  }

  .gap-news .news1 .gap-news-title .news1-date,
  .gap-news .news2 .gap-news-title .news2-date,
  .gap-news .news3 .gap-news-title .news3-date,
  .gap-news .news4 .gap-news-title .news4-date,
  .gap-news .news5 .gap-news-title .news5-date,
  .gap-news .news6 .gap-news-title .news6-date,
  .gap-news .news7 .gap-news-title .news7-date {
    color: white;
    text-align: right;
    padding-right: 12px;
    font-size: 23px;
    transition: 0.5s;
    font-weight: bolder;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    font-weight: bolder;
  }
}

@media (min-width: 991px) and (max-width: 1200px) {
  .gap-news .news1 {
    grid-column: 2 / span 8;
  }

  .gap-news .news2 {
    grid-column: 10 / span 10;
    grid-row: 1/3;
  }

  .gap-news .news7 {
    grid-column: 10 / span 10;
    grid-row: 1/3;
  }

  .gap-news .news3 {
    grid-column: 2 / span 8;
  }

  .gap-news .news4 {
    grid-column: 2 / span 8;
  }

  .gap-news .news5 {
    grid-column: 10 / span 5;
  }

  .gap-news .news6 {
    grid-column: 15 / span 5;
  }

  .gap-news .news7 {
    grid-column: 10 / span 10;
    grid-row: 1/3;
  }
}