@import url("global.css");

/* project */
body {
  padding-top: 20px;
}

.pr-imgs {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.pr-imgs::-webkit-scrollbar {
  display: none;
}

.pr-imgs img {
  height: 350px;
  width: auto;
}

/* contact */
.contact-wrap {
  display: flex;
  flex-direction: column;
  text-align: center;
  margin-top: 50%;
}

.contact-wrap a {
  padding-bottom: 10px;
}

/* big screen */
@media only screen and (min-width: 720px) {
  .pr-imgs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    padding: 10px;
  }

  .pr-imgs img {
    width: 100%;
    height: auto;
    cursor: zoom-in;
  }

  .pr-imgs img:hover {
    cursor: zoom-in;
  }

  .expanded {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    overflow-y: auto;
  }

  .expanded img {
    max-width: 90%;
    max-height: 90%;
  }

  .expanded img:hover {
    cursor: zoom-out;
  }
}