.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 0.8fr 0.8fr;
  grid-template-rows: repeat(6, 1fr);
  grid-template-areas:
    "loading menu character command"
    "loading menu character command"
    "hero calendar character command"
    "hero calendar character command"
    "hero event character command"
    "hero event character 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;}

.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;}


.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);
}


@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(6, 1fr);
    grid-template-rows: repeat(3, auto);
    grid-template-areas:
      "loading loading hero hero hero hero"
      "menu menu calendar calendar event event"
      "character character character command command command";
  }
  .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;
  }
}