.section-resultid-top {
  padding: 64px 0;
  background-color: #000000;
  background-image: url('../images/resultid/resultid-hero-bg.jpg');
  background-repeat: no-repeat;
  background-size: 720px auto;
  background-position: center top;
}

.section-resultid-background {
  position: relative;
  padding: 60px 0;
  background-color: #F5F6F8;
}

.section-resultid-exploration {
  padding: 60px 0 20px;
}

.section-resultid-placement-dark {
  padding: 60px 0;
}

.section-resultid-placement-light {
  padding: 60px 0;
  background-color: #121212;
}

.section-resultid-placement-mobile {
  padding: 60px 0;
}

.section-resultid-development {
  padding: 60px 0;
  background-color: #292929;
}

.container.continer-hifi-2 {
  max-width: 1320px;
}

.projects-item.resultid {
  width: 100%;
  padding: 30px 30px 453px;
  background-color: #000000;
  background-image: url(../images/projects-resultid-image.png);
  background-repeat: no-repeat;
  background-size: 920px auto;
  background-position: center calc(100% + 78px);
}

.projects-item.resultid .projects-logo {
  height: 15px;
}

.projects-item.resultid .projects-detail a h2 {
  max-width: 446px;
}

.projects-item.resultid .projects-detail p {
  max-width: 487px;
}

/* Hero */

.resultid-hero {
  display: flex;
  flex-direction: column;
}

.portfolio-animation {
  position: relative;
  height: 256px;
}

.resultid-hero-animation {
  position: relative;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 480px;
}

.portfolio-header-text {
  flex: 0 0 100%;
  width: 100%;
  margin: 0;
}

.portfolio-header-text h1,
.portfolio-header-text p,
.portfolio-header-text .portfolio-header-detail h2,
.portfolio-header-text .portfolio-header-detail span {
  color: #FFF;
}

.resultid-header-detail {
  flex-direction: column;
  grid-gap: 30px;
  margin: 20px 0 0;
}

.resultid-header-detail p {
  margin: 0;
}

.resultid-header-detail .portfolio-header-info {
  margin: 0;
}

/* Project Backgroud */

.resultid-background-images {
  margin: 35px 0 0;
}

.resultid-background-desktop {
  display: none;
}

.resultid-background-mobile {
  display: block;
}

/* Exploration */

.resultid-exploration-sketch {
  display: grid;
  grid-template-columns: 1fr;
  margin: 60px 0 0;
}

.resultid-exploration-sketch img {
  display: block;
  width: 100%;
}

.resultid-exploration-ver0 {
  padding: 0 0 20px;
}

.resultid-exploration-ver1 {
  padding: 100px 0 20px;
  background-image: linear-gradient(180deg, #F6F7FF 0%, #D8D5FF 184.82%);
}

.resultid-exploration-ver2 {
  padding: 100px 0 20px;
  background-color: #000000;
  background-image: url('../images/resultid/resultid-hifi-2-bg.jpg');
  background-repeat: no-repeat;
  background-size: 2560px 100%;
  background-position: center;
}

.resultid-exploration-ver1 .resultid-exploration-sketch,
.resultid-exploration-ver2 .resultid-exploration-sketch {
  grid-gap: 76px;
  margin: 0;
}

.resultid-exploration-ver1 .container.continer-hifi-1 .resultid-exploration-sketch {
  grid-gap: 14px;
}

.resultid-exploration-label {
  margin: 40px 0 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #333333;
  opacity: 0.2;
}

.resultid-exploration-ver2 .resultid-exploration-label {
  color: #FFFFFF;
  opacity: 0.3;
}

.resultid-exploration-ver1 .resultid-exploration-label,
.resultid-exploration-ver2 .resultid-exploration-label {
  margin: 80px 0 0;
}

/* Placement Dark */

.resultid-placement-dark {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 20px;
  margin: 60px 0 0;
}

.resultid-placement-dark img {
  display: block;
  width: 100%;
}

/* Placement Light */

.resultid-placement-light {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 20px;
  margin: 60px 0 0;
}

.resultid-placement-light img {
  display: block;
  width: 100%;
}

/* Placement Mobile */

.resultid-placement-mobile {
  /* display: grid;
  grid-template-columns: repeat(2, 1fr); */
  margin: 55px -8px -8px;
}

.resultid-placement-mobile div {
  width: 50%;
  padding: 8px;
}

.resultid-placement-mobile div img {
  display: block;
  width: 100%;
}

/* Webflow Development */

.resultid-webflow-image {
  position: relative;
  margin: 40px 0 0;
}

.resultid-webflow-image img {
  position: relative;
  width: 100%;
}

/* Responsive */

@media (min-width: 576px) {
  .resultid-exploration-sketch {
    grid-template-columns: repeat(2, 1fr);
    margin: 120px 0 0;
  }

  .resultid-placement-mobile {
    margin: 95px -15px -15px;
  }

  .resultid-placement-mobile div {
    width: 50%;
    padding: 15px;
  }

  .resultid-webflow-image {
    margin: 80px 0 0;
  }

  .resultid-webflow-image img {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 122.7%;
  }
}

@media (min-width: 768px) {
  .projects-item.resultid {
    width: calc(50% - 30px);
    margin: 0 20px 20px 10px;
    padding: 30px 30px 453px;
  }

  .section-resultid-top {
    padding: 64px 0 200px;
    background-size: 920px;
  }

  .section-resultid-background {
    padding: 120px 0;
  }

  .section-resultid-exploration {
    padding: 120px 0 20px;
  }

  .section-resultid-placement-dark {
    padding: 120px 0;
  }

  .section-resultid-placement-light {
    padding: 120px 0;
  }

  .section-resultid-placement-mobile {
    padding: 120px 0;
  }

  .section-resultid-development {
    padding: 120px 0;
  }

  .portfolio-animation {
    position: relative;
    height: 320px;
  }
  
  .resultid-hero-animation {
    position: relative;
    top: -200px;
    width: 688px;
  }

  .resultid-background-images {
    margin: 80px 0 0;
  }

  .resultid-background-desktop {
    display: block;
  }

  .resultid-background-desktop img {
    display: block;
    width: 100%;
  }

  .resultid-background-mobile {
    display: none;
  }

  .resultid-placement-dark {
    grid-template-columns: repeat(2, 1fr);
    margin: 120px 0 0;
  }

  .resultid-placement-dark img:nth-child(3n+1) {
    grid-column: span 2;
  }

  .resultid-placement-light {
    grid-template-columns: repeat(2, 1fr);
    margin: 120px 0 0;
  }

  .resultid-placement-light img:nth-child(4n+1),
  .resultid-placement-light img:nth-child(4n+2) {
    grid-column: span 2;
  }

  .resultid-placement-mobile {
    /* grid-template-columns: repeat(3, 1fr); */
  }
  
  .resultid-placement-mobile div {
    width: 33.333333%;
  }
}

@media (min-width: 992px) {
  .resultid-header-detail {
    flex-direction: row;
    margin: 50px 0 0;
  }

  .resultid-header-detail p {
    max-width: 513px;
  }
}

@media (min-width: 1200px) {
  .projects-item.resultid {
    /* width: 637px; */
    width: 463px;
    margin: 0 20px 40px;
    padding: 50px 50px 453px;
  }

  .section-resultid-top {
    background-size: 1440px;
  }

  .portfolio-animation {
    position: relative;
    height: 579px;
  }
  
  .resultid-hero-animation {
    position: relative;
    top: -186px;
    width: 1110px;
  }

  .resultid-placement-mobile {
    /* grid-template-columns: repeat(4, 1fr); */
  }
  
  .resultid-placement-mobile div {
    width: 25%;
  }
}