@charset "UTF-8";

.main {
  .works {
    padding-block: 112px 130px;

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

    .h3-title {
      font-family: var(--yumin);
      font-size: 30px;
      font-weight: 600;
      line-height: 1.8;
      text-align: center;
      margin-block-start: 73px;

      @media (width <= 768px) {
        font-size: calc((100 / 750) * 38 * 1vw);
        margin-block-start: calc((100 / 750) * 69 * 1vw);
      }

      .tc-b {
        color: #8a9ed0;
      }
    }

    .works-list {
      margin-block-start: 73px;
      display: block grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 5px;

      @media (width <= 768px) {
        margin-block-start: calc((100 / 750) * 68 * 1vw);
        grid-template-columns: repeat(3, 1fr);
        gap: calc((100 / 750) * 5 * 1vw);
      }

      label {
        cursor: unset;
        dialog {
          background: transparent;
          width: 100%;
          margin-block: 0;
          margin-inline: auto;
          padding: 0;
          inset: 0;
          border: none;
          max-width: 100%;
          max-height: 100%;
          transition: all 400ms ease 1000ms;
          .dialog-inner {
            background: rgba(0, 0, 0, 0.8);
            display: grid;
            place-content: center;
            min-height: 100vh;
            padding-inline: 90px;
            padding-block: 90px;
            transition: all 400ms ease 1000ms;

            @media (width <= 768px) {
              padding-inline: calc((100 / 750) * 60 * 1vw);
              padding-block: calc((100 / 750) * 60 * 1vw);
            }
            .dialog-contents {
              position: relative;
              cursor: initial;
              transition: all 400ms ease 1000ms;
              animation-name: dialog;
              animation-duration: 600ms;
              animation-delay: 100ms;
              animation-timing-function: ease;
              animation-iteration-count: 1;
              animation-direction: normal;
              animation-fill-mode: forwards;
              animation-play-state: running;
              opacity: 0;
              transform: translateY(-1em);
              max-inline-size: 1300px;

              @media (width <= 768px) {
                max-inline-size: calc((100 / 750) * 670 * 1vw);
              }

              & img {
                max-block-size: 80vh;
                inline-size: auto;
              }

              .close-modal {
                position: absolute;
                top: -60px;
                right: -60px;

                @media (width <= 768px) {
                  top: calc((100 / 750) * -60 * 1vw);
                  right: calc((100 / 750) * 0 * 1vw);
                  outline: none;
                  & svg {
                    width: calc((100 / 750) * 40 * 1vw);
                    height: calc((100 / 750) * 40 * 1vw);
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
@keyframes dialog {
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}