/*==================== PORTFOLIO ====================*/
.portfolio h2{
    color: #333;
    margin-bottom: var(--pdd_middle);
  }

  .portfolio{
    padding: var(--pdd_middle);
    flex: 1 1 80%;
    max-width: 1240px;
    margin: 0 auto;
  }
  .portfolio__container {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
  }
  
  .portfolio-item{
    position: relative;
    z-index: 10;
    min-height: 17rem;

    background-size: cover;
    background-position: center;
    background-color: #555;
    color: #fff;

    font-weight: var(--font-light);
    font-size: var(--h3-font-size);
    text-align: center;
    padding: 2rem;

    display: flex;
    justify-content: center;
    align-items: center;
    transition: all ease-in-out 300ms;

  }

  .small {
    grid-row: span 1;
    grid-column: span 1;
  }
  
  
  .tall {
    grid-row: span 2;
    grid-column: span 1;
  }

   .long {
    grid-row: span 1;
    grid-column: span 2;
  }
  
  .large {
    grid-row: span 2;
    grid-column: span 2;
  }
  

/*==================== PORTFOLIO ITEMS ====================*/
.one {
    background-image: url(../img/portfolio_01.jpg);
}

.two {
    background-image: url(../img/portfolio_02.jpg);
}

.three {
    background-image: url(../img/portfolio_03.jpg);
}

.four {
    background-image: url(../img/portfolio_04.jpg);
}

.five {
    background-image: url(../img/portfolio_05.jpg);
}

.six {
    background-image: url(../img/portfolio_06.jpg);
}

.seven {
    background-image: url(../img/Infographic01.jpg);
}
/*==================== MEDIA QUERIES ====================*/

@media (max-width: 35em) {

  .portfolio {
    padding: var(--pdd_middle) 0;
  }

  .portfolio__container {
      grid-template-columns: 1fr;
      grid-gap: 20px;
    }

    .portfolio-item{
      height: 300px;
      grid-column: span 1;
      grid-row: span 1;
    }

}

@media (hover:hover) {
  /*targets only devices that can hover*/
  .portfolio-item::before {
    content: '';
    display: block;
    background: #000;
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: all ease-in-out 300ms;
    z-index: -1;
  }
  
  .portfolio-item:hover::before {
    opacity: 0.8;
  }

  .portfolio-item .portfolio__data {
    display: none;
    }
    .portfolio-item:hover .portfolio__data {
    display: inline;
    }

    .portfolio-item a:hover {
      color: var(--second-color);
      background: none;
      border: 4px solid var(--second-color);
    }
  
}

@media (hover:none) {
  /*targets only devices that don't hover*/

  .portfolio-item .portfolio__data {
    display: none;
    }
}