@charset "UTF-8";

.mgsblk-news
{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 50px;
  margin-bottom: 50px;
}
.mgsblk-news img
{
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.mgsblk-news .data
{
  padding-top: 10px;
}
.mgsblk-news .data .text
{
  color: #333;
  font-size: 16px;
}

.mgsblk-news.list-works a
{
  position: relative;
  
}

.mgsblk-news.list-works a .data
{
  display: none;
  
}
.mgsblk-news.list-works a:hover .data
{
  display: block;
  padding-top: 10px;
  position: absolute;
  left: 0;
  text-align: center;
  width: 100%;
  height: 100%;
  top: 0;
  background: rgb(0, 0, 0, 0.3);
  place-content:center;
}
.mgsblk-news.list-works .data .text{color: #fff;}

.mgsblk-news-links
{
  text-align: center;
}
.mgsblk-news-links a
{
  
}

.mgsblk-news-links a
 {
  border: 1px solid #000;
  padding: 13px 40px 15px 40px;
  color: #000;
  font-size: max(1vw, 15px);
 }
 .mgsblk-news-links a::after
 {
  content: "";
  background: url(../../img/svg/arrow_right2.svg) no-repeat;
  display: inline-block;
  background-size: contain;
  width: 15px;
  height: 15px;
  margin-left: 7px;
  vertical-align: middle;
 }


/*
<div class="news-links">
    <a href="#">more</a>
</div>
*/

/* -------------------------------------------------------------------------------- */
/*        TABLET                                                                    */
/* -------------------------------------------------------------------------------- */
@media screen and (min-width: 740px) and (max-width: 899px)
{
  .mgsblk-news
  {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

}

/* -------------------------------------------------------------------------------- */
/*         MOBILE                                                                   */
/* -------------------------------------------------------------------------------- */
@media only screen and (max-width: 739px)
{
  .mgsblk-news
  {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
  }
}