@charset "UTF-8";

/* =========================================================
  docs movie
========================================================= */

/* contentGpArticleDocs
----------------------------------------------- */
.contentGpArticleDocs {
  margin-top: 25px;
}

.contentGpArticleDocs ul {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.contentGpArticleDocs li {
  flex-basis: calc((100% - 60px) / 3);
  position: relative;
}

.contentGpArticleDocs li .image {
  display: block;
  aspect-ratio: 16/9;
  margin-bottom: 10px;
}

.contentGpArticleDocs li .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media only screen and (max-width: 1179px) {
  .contentGpArticleDocs li {
    flex-basis: calc((100% - 30px) / 2);
  }
}

@media only screen and (max-width: 534px) {
  .contentGpArticleDocs {
    margin-top: 15px;
  }

  .contentGpArticleDocs ul {
    gap: 30px 15px;
  }

  .contentGpArticleDocs li {
    flex-basis: calc((100% - 15px) / 2);
  }
}