@charset "UTF-8";

.main {
  /* =====================
    MV
  ===================== */
  .u-mv {
    background-image: url('../img/works/mv.png');
  }
  /* =====================
    実績 一覧
  ===================== */
  .works {
    position: relative;
    padding-block: 120px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
    background-image: url('../img/works/works_bg.png');

    @media (width <= 768px) {
      padding-block: calc((100 / 390) * 64 * 1vw);
    }

    .works-list {
      margin-block-start: 80px;
      padding-inline: 50px;
      display: block grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;

      @media only screen and (width <= 768px) {
        margin-block-start: calc((100 / 390) * 64 * 1vw);
        padding-inline: 0;
        grid-template-columns: repeat(2, 1fr);
        gap: calc((100 / 390) * 16 * 1vw);

        & img {
          inline-size: 100%;
        }
      }
    }
  }
}