.section-swypebites-top {
  padding: 64px 0;
  background-color: #1F1D2B;
}

.swypebites-background {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
}

.swypebites-bg-1 {
  position: absolute;
  bottom: -185px;
  left: 40px;
  width: 456px;
  height: 456px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
}

.swypebites-bg-2 {
  position: absolute;
  top: 325px;
  left: -29px;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
}

.swypebites-bg-3 {
  position: absolute;
  top: 405px;
  left: 53px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
}

.swypebites-bg-4 {
  position: absolute;
  top: 355px;
  left: 103px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
}

.swypebites-hero {
  display: flex;
  flex-direction: column-reverse;
  grid-gap: 64px;
}

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

.section-swypebites-background::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: #FFFFFF;
}

.section-swypebites-development {
  padding: 60px 0;
}

.section-swypebites-coloring {
  padding: 60px 0 0;
  background-color: #F5F6F8;
}

.section-swypebites-face {
  padding: 60px 0;
}

.section-swypebites-illustration {
  padding: 60px 0;
  background-color: #F5F6F8;
}

.section-swypebites-implementation {
  padding: 60px 0;
  background-color: #181623;
}

.section-swypebites-animation {
  padding: 60px 0;
  background-color: #f5f6f8;
}

.swypebites-container {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 10px;
}

.swypebites-logo {
  position: relative;
}

.swypebites-animation {
  position: relative;
  width: calc(100% + 50px);
  margin: 0 -25px;
}

.swypebites-header-detail {
  display: flex;
  flex-direction: column;
  grid-gap: 30px;
  width: 100%;
  margin: 20px 0 0;
}

.swypebites-header-detail p {
  margin: 0;
  max-width: 464px;
}

.swypebites-header-detail p a {
  text-decoration: underline;
  color: #FFFFFF;
}

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

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

/* Project Backgroud */

.swypebites-background-images {
  display: flex;
  grid-gap: 10px;
  width: calc(100% + 30px);
  margin: 60px 0 0;
}

.swypebites-background-images img {
  display: block;
}

.swypebites-background-images img:nth-child(1) {
  width: 56%;
}

.swypebites-background-images img:nth-child(2) {
  width: 44%;
}

/* Character Development */

.swypebites-character-images {
  width: calc(100% + 60px);
  margin: 60px -30px 0;
  overflow-x: auto;
}

.swypebites-character-images::-webkit-scrollbar {
  display: none;
}

.swypebites-character-images img {
  width: 100%;
  min-width: 786px;
}

.swypebites-character-container {
  display: inline-flex;
  padding: 0 30px;
}

/* Character Coloring */

.swypebites-character-color {
  margin: 40px 0 0;
}

.swypebites-character-color img {
  width: 100%;
}

.swypebites-color-palette {
  margin: 60px 0 0;
}

.swypebites-color-palette img {
  width: calc(100% + 30px);
}

/* Face Creating */

.swypebites-face-images {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 40px;
  width: 100%;
  margin: 40px 0 0;
}

.swypebites-face-images img {
  display: block;
  width: 100%;
}

/* Illustration */

.swypebites-illustration-images {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  width: 100%;
  margin: 60px 0 0;
}

.swypebites-illustration-images img {
  display: block;
  width: 100%;
}

.swypebites-illustration-images img:nth-child(1) {
  grid-column: span 1;
  grid-row: 5;
}

.swypebites-illustration-images img:nth-child(2) {
  grid-column: span 1;
  grid-row: 5;
}

.swypebites-illustration-images img:nth-child(3) {
  grid-column: span 2;
  grid-row: span 2;
}

.swypebites-illustration-images img:nth-child(4) {
  display: none;
  grid-column: span 1;
}

.swypebites-illustration-images img:nth-child(5) {
  display: none;
  grid-column: span 1;
}

.swypebites-illustration-images img:nth-child(6) {
  display: none;
  grid-column: span 1;
}

.swypebites-illustration-images img:nth-child(7) {
  display: none;
  grid-column: span 1;
}

.swypebites-illustration-images img:nth-child(8) {
  grid-column: span 1;
}

.swypebites-illustration-images img:nth-child(9) {
  grid-column: span 1;
}

.swypebites-illustration-images img:nth-child(10) {
  grid-column: span 2;
}

.swypebites-illustration-images img:nth-child(11) {
  display: none;
  grid-column: span 1;
}

.swypebites-illustration-images img:nth-child(12) {
  display: none;
  grid-column: span 1;
}

/* Illustration Implementation */

.swypebites-implementation-images {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  width: 100%;
  margin: 60px 0 0;
}

.swypebites-implementation-images img {
  display: block;
  width: 100%;
}

.swypebites-implementation-images img:nth-child(1) {
  grid-column: span 2;
}

.swypebites-implementation-images img:nth-child(2) {
  grid-column: span 1;
}

.swypebites-implementation-images img:nth-child(3) {
  grid-column: span 1;
}

.swypebites-implementation-images img:nth-child(4) {
  display: none;
  grid-column: span 1;
}

.swypebites-implementation-images img:nth-child(5) {
  grid-column: span 2;
}

/* Animation */

.swypebites-animation-bottom {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
}

.projects-item.swypebites {
  width: 100%;
  padding: 30px 30px 368px;
  background-color: #5457B9;
  background-image: url('../images/projects-swypebites-image.png');
  background-repeat: no-repeat;
  background-size: 360px auto;
  background-position: center 100%;
  -webkit-box-shadow: 0px 10px 30px rgba(91,111,137,0.05);
  box-shadow: 0px 10px 30px rgba(91,111,137,0.05);
}

.projects-item.swypebites .projects-logo {
  height: 28px;
}

.projects-item.swypebites .projects-detail {
  max-width: 100%;
}

/* Responsive */

@media (min-width: 576px) {
  .swypebites-animation {
    position: relative;
    width: 100%;
    margin: 0;
  }
}

@media (min-width: 768px) {
  .section-swypebites-top {
    padding: 64px 0 200px;
  }

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

  .section-swypebites-background::before {
    height: 164px;
  }

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

  .section-swypebites-coloring {
    padding: 120px 0 0;
  }

  .section-swypebites-face {
    padding: 120px 0;
  }

  .section-swypebites-illustration {
    padding: 120px 0;
  }

  .section-swypebites-implementation {
    padding: 120px 0;
  }

  .section-swypebites-animation {
    padding: 120px 0;
  }

  .swypebites-hero {
    flex-direction: column;
  }

  .swypebites-header-detail {
    flex-direction: row;
    margin: 50px 0 0;
  }

  .swypebites-background-images {
    grid-gap: 20px;
    margin: 120px 0 0;
  }

  .swypebites-character-images {
    width: 100%;
    margin: 120px 0 0;
  }

  .swypebites-character-images img {
    min-width: 100%;
  }

  .swypebites-character-color {
    margin: 80px 0 0;
  }

  .swypebites-illustration-images {
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 24px;
    margin: 100px 0 0;
  }

  .swypebites-illustration-images img:nth-child(1) {
    grid-row: 1;
  }

  .swypebites-illustration-images img:nth-child(2) {
    grid-row: 1;
  }

  .swypebites-illustration-images img:nth-child(4) {
    display: block;
  }

  .swypebites-illustration-images img:nth-child(5) {
    display: block;
  }

  .swypebites-illustration-images img:nth-child(6) {
    display: block;
  }

  .swypebites-illustration-images img:nth-child(7) {
    display: block;
  }

  .swypebites-illustration-images img:nth-child(11) {
    display: block;
  }

  .swypebites-illustration-images img:nth-child(12) {
    display: block;
  }

  .swypebites-implementation-images {
    grid-gap: 24px;
    grid-template-columns: repeat(3, 1fr);
    margin: 100px 0 0;
  }

  .swypebites-implementation-images img:nth-child(1) {
    grid-column: span 3;
  }

  .swypebites-implementation-images img:nth-child(4) {
    display: block;
  }

  .swypebites-implementation-images img:nth-child(5) {
    grid-column: span 3;
  }

  .swypebites-animation-bottom {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 24px;
  }

  .projects-item.swypebites {
    /* width: calc(50% - 30px); */
    margin: 0 10px 20px 20px;
    /* padding: 50px 50px 368px; */
    padding: 30px;
    background-position: 100% center;
  }

  .projects-item.swypebites .projects-detail {
    max-width: 50%;
  }

  .projects-item.swypebites .projects-detail p {
    max-width: 376px;
  }
}

@media (min-width: 992px) {
  .swypebites-face-images {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 80px;
    margin: 120px 0 0;
  }

  .projects-item.swypebites {
    padding: 50px;
    background-position: calc(100% - 70px) center;
  }

  .projects-item.swypebites .projects-detail {
    max-width: 432px;
  }
}

@media (min-width: 1200px) {
  .swypebites-background {
    width: 1440px;
  }

  .swypebites-bg-1 {
    position: absolute;
    top: -288px;
    bottom: auto;
    left: -293px;
    width: 1300px;
    height: 1300px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
  }

  .swypebites-bg-2 {
    position: absolute;
    top: 389px;
    left: 1332px;
    width: 215px;
    height: 215px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
  }

  .swypebites-bg-3 {
    position: absolute;
    top: 580px;
    left: 1144px;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
  }

  .swypebites-bg-4 {
    position: absolute;
    top: 890px;
    left: 1353px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
  }

  .swypebites-color-palette {
    margin: 120px 0 0;
  }

  .swypebites-color-palette img {
    width: 1240px;
  }

  .swypebites-background-images {
    width: 1240px;
  }

  .projects-item.swypebites {
    /* width: 463px; */
    margin: 0 20px 40px;
    background-image: url('../images/projects-swypebites-image-big.png');
    background-size: 680px auto;
    background-position: calc(100% + 70px) center;
  }

  /* .projects-item.swypebites .projects-detail {
    max-width: 432px
  } */
}