.portfolio {
  padding-top: 180px;
  padding-bottom: 5rem;
}
.portfolio-content {
  display: flex;
  flex-direction: column;
  gap: 8rem;
}
.image-grid {
  display: grid;
  padding: 2rem;
  gap: 1rem;
  margin-bottom: 2rem;
}
.image-grid img {
  width: 100%;
  height: 100%;
  border-radius: 0.5rem;
  object-fit: cover;
}
.image-grid img:hover {
  transform: scale(1.02);
  transition: transform 0.2s ease;
}

.cafe-lta .image-grid {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(6, auto);
  grid-template-areas:
    "loading event menu"
    "loading event menu"
    "hero character menu"
    "hero character command"
    "calendar map command"
    "calendar map command";
}
.cafe-lta .loading {  grid-area: loading;}
.cafe-lta .hero {  grid-area: hero;}
.cafe-lta .command {  grid-area: command;}
.cafe-lta .menu {  grid-area: menu;}
.cafe-lta .calendar {  grid-area: calendar;}
.cafe-lta .character {  grid-area: character;}
.cafe-lta .event {  grid-area: event;}
.cafe-lta .map {  grid-area: map;}

.PLECO .image-grid {
  grid-template-columns: 1fr 1fr 0.5fr 0.5fr;
  grid-template-rows: repeat(6, 1fr);
  grid-template-areas:
    "hero page-hero startup-support sp-hero"
    "hero page-hero startup-support sp-hero"
    "price cleaning-table startup-support sp-hero"
    "price cleaning-table management footer"
    "our FAQ management footer"
    "our FAQ management footer";
}
.PLECO .hero{  grid-area: hero;}
.PLECO .startup-support{  grid-area: startup-support;}
.PLECO .management{  grid-area: management;}
.PLECO .price{  grid-area: price;}
.PLECO .FAQ{  grid-area: FAQ;}
.PLECO .footer{  grid-area: footer;}
.PLECO .price-table{  grid-area: price-table;}
.PLECO .page-hero{  grid-area: page-hero;}
.PLECO .sp-hero{  grid-area: sp-hero;}
.PLECO .cleaning-table{  grid-area: cleaning-table;}
.PLECO .our{  grid-area: our;}

.qr-app .image-grid img {
  max-width: 800px;
  margin: 0 auto;
}
.more {
  margin: 0 auto;
  padding-right: 1.5rem;
  font-family: "Graduate", serif;
  border-bottom: 3.5px solid var(--color-red);
  display: block;
  width: fit-content;
  position: relative;
  transition: transform 0.2s ease;
}
.more::after {
  content: "";
  position: absolute;
  right: -20px;
  bottom: -3px;
  width: 20px;
  height: 3px;
  border-radius: 100vmax;
  background: var(--color-red);
  transform: translate(-16px, -6px) rotate(45deg);
}
.more:hover {
  border-color: var(--color-red-hover);
  transform: translateY(-0.5px) scale(1.02);
}
.more a:hover {
  opacity: 0.7;
}
.more:hover::after {
  background: var(--color-red-hover);
}


/* contact */
.contact-text {
  text-align: center;
  margin-bottom: 1em;
}
.email-wrapper {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}
.email {
  font-family: serif;
}
#copy-btn {
  font-size: 1.2rem;
  padding: 4px 10px;
  border: 3px solid var(--color-red);
  border-radius: 5px;
  background: transparent;
  color: var(--color-white);
  cursor: pointer;
  transition: 0.2s;
  font-family: "Graduate", serif;
}
#copy-btn:hover {
  border: 3px solid var(--color-red-hover);
  background: var(--color-white-hover);
  color: var(--color-gray);
}
.check {
  color: var(--color-red);
  font-size: 1rem;
  font-weight: 800;
}
footer {
  text-align: center;
  padding: 1rem 0;
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 768px) {
  .portfolio {
    padding-top: 140px;
  }
  .portfolio-content {
    gap: 5rem;
  }
  .image-grid {
    padding: 0rem;
    margin-bottom: 1rem;
    gap: 0.5rem;
  }
  .cafe-lta .image-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr .8fr .8fr .6fr .6fr;
    /* grid-template-rows: auto auto .5fr; */
    /* grid-template-areas:
      "loading loading hero hero hero hero"
      "menu menu calendar calendar event event"
      "character character character command command command"; */
    grid-template-areas:
      "loading  hero"
      "calendar menu"
      "event menu"
      "command character"
      "command map";
  }
  .PLECO .image-grid {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(5, auto);
    grid-template-areas:
      "hero hero hero price price price"
      "our our our page-hero page-hero page-hero"
      "cleaning-table cleaning-table cleaning-table FAQ FAQ FAQ"
      "startup-support startup-support management management sp-hero sp-hero"
      "startup-support startup-support management management footer footer";
  }

  .more {
    padding-right: 1.2rem;
  }

  .email-wrapper {
    font-size: 1rem;
    flex-direction: column;
  }
  #copy-btn {
    font-size: 1rem;
  }
}