/* portfolio-item  */
.portfolio-item {
    display: grid;
    grid-template-rows: repeat(auto-fill, minmax(30rem, 1fr));
} 

@media (min-width: 768px) { 
  .portfolio-item:nth-child(odd) .portfolio-img{
    order:1;
  }
}

.portfolio-item:nth-child(1) {
  background-color:linear-gradient(to bottom, #05011f, #04001e);
}

.portfolio-item:nth-child(2) {
  background:linear-gradient(to right, #b1eb66, #6ed6d7);
}

.portfolio-item:nth-child(3) {
  background:linear-gradient(to right, #85459f, #302eb1);
}

.portfolio-item:nth-child(4) {
  background:linear-gradient(to right, #f68d79, #ec615d);
}

@media (min-width: 768px) { 
    .portfolio-item {
        display: grid;
        grid-template-rows: unset;
        grid-template-columns: repeat(2,1fr);
    }
    .portfolio-item:nth-child(1) {
      background:linear-gradient(to bottom, #09061c, #04001e);
    }
    .portfolio-item:nth-child(2) {
      background:linear-gradient(to bottom, #b1eb66, #6ed6d7);
    }
    .portfolio-item:nth-child(3) {
      background:linear-gradient(to bottom, #85459f, #302eb1);
    }
    .portfolio-item:nth-child(4) {
      background:linear-gradient(to bottom, #f68d79, #ec615d);
    }
}
/* portfolio-img */
.portfolio-img {
    background-image:
    linear-gradient(to bottom, transparent 0%, #04001e 100%),;
    background-size: 100%;
    background-position: 0% 0%;
    background-repeat: no-repeat;
}

@media (min-width: 768px) { 
  .portfolio-img {
      background-size: cover;
  }
}

.landing  .portfolio-img{
  background-image:
  linear-gradient(to bottom, transparent 0%, #04001e 100%),
  url('../img/pruebas.png');
}

.tiendita .portfolio-img {
  background-image:
  linear-gradient(to bottom, transparent 0%, #6ed6d7 100%),
  url('../img/tiendita.png');
}

.slacker .portfolio-img {
  background-image:
  linear-gradient(to bottom, transparent 0%, #302eb1 100%),
  url('../img/slacker.png');
}

.principe .portfolio-img {
  background-image:
  linear-gradient(to bottom, transparent 0%, #ec615d 100%),
  url('../img/principe.png');
}

@media (min-width: 768px) { 
    .landing .portfolio-img {
      background-image:
      linear-gradient(to right, transparent 0%, #04001e 100%),
      url('../img/pruebas.png');
    }
    .tiendita .portfolio-img {
      background-image:
      linear-gradient(to right, transparent 0%, #6ed6d7 100%),
      url('../img/tiendita.png');
    }
    .slacker .portfolio-img {
      background-image:
      linear-gradient(to right, transparent 0%, #302eb1 100%),
      url('../img/slacker.png');
    }
    .principe .portfolio-img {
      background-image:
      linear-gradient(to right, transparent 0%, #ec615d 100%),
      url('../img/principe.png');
    }
}
/* portfolio-content  */
.portfolio-content {
    display: flex;
    flex-direction: column;
    justify-content:center;
}

@media (min-width: 768px) {
    .portfolio-content {
      padding: 10rem 5rem;
    }
}
/* textos */
.portfolio-item:nth-child(even) .portfolio-text, .portfolio-item:nth-child(even) .portfolio-title {
  color: var(--black);
}
.portfolio-item:nth-child(n) .portfolio-title {
  margin-top:2rem;
}
@media (min-width: 768px) { 
  .portfolio-item:nth-child(n) .portfolio-title {
    margin-top:0;
  }
}

/* portfolio-btn-group */
.portfolio-btn-group {
  margin-bottom: 5rem;
}

@media (min-width: 480px) { 
    .portfolio-btn-group {
        display: flex;
        margin-bottom: 0;
    }
}

.portfolio-item:nth-child(odd) .portfolio-btn-project, .portfolio-item:nth-child(odd) .portfolio-btn-project {
    background-color: var(--white);
    color: var(--black);
    margin-bottom:2rem;
}

.portfolio-item:nth-child(odd) .portfolio-btn-code, .portfolio-item:nth-child(odd) .portfolio-btn-code {
    border: .1rem solid var(--white);
    background-color: transparent;
    color: var(--white);
}

.portfolio-item:nth-child(even) .portfolio-btn-project, .portfolio-item:nth-child(even) .portfolio-btn-project {
  background-color: var(--black);
  color: var(--white);
  margin-bottom:2rem;
}

.portfolio-item:nth-child(even) .portfolio-btn-code, .portfolio-item:nth-child(even)  .portfolio-btn-code {
  border: .1rem solid var(--black);
  background-color: transparent;
  color: var(--black);
}

@media (min-width: 480px) { 
  .portfolio-item:nth-child(n) .portfolio-btn-project {
    display: inline;
    margin-bottom:2rem;
  }

  .portfolio-item:nth-child(n) .portfolio-btn-code {
    margin:0 0 2rem 1rem;
    display: inline;
  }
}

@media (min-width: 768px) { 
  .portfolio-item:nth-child(n) .portfolio-btn-project, .portfolio-item:nth-child(n) .portfolio-btn-code {
    margin-bottom:0rem;
  }
}