.logo {
  margin-bottom: -6.4rem;
}

.works-flex {
  align-items: flex-end;
}

.portfolio {
  max-width: 140rem;
  margin: 0 auto;
  font-size: 1.953rem;
}

.portfolio__tab--container {
  display: flex;
  gap: 1.2rem;
  align-items: flex-end;
}

.portfolio__tab {
  background: none;
  border: none;
  font-family: "Karla", sans-serif;
  font-size: 1.953rem;
  font-weight: 600;

  color: #ebe3d2;
  padding: 0 1.6rem 0.4rem 1.6rem;
  margin-bottom: 3.2rem;
  cursor: pointer;

  transition: all 500ms;
}

.portfolio__tab:hover {
  color: #ff5f00;
}

.portfolio__tab--active {
  border-bottom: 4px solid #ff5f00;
}

.portfolio__content {
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.4rem;
}

.portfolio__content--active {
  display: grid;
}

.portfolio__item {
  height: 33.2rem;
  width: 33.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  overflow: hidden;
}

.portfolio__item--cebu-2023-refresh {
  background-image: url(../img/portfolio-icons/400_18.png);
}

.portfolio__item--psbank {
  background-image: url(../img/portfolio-icons/400_1.png);
}

.portfolio__item--nick-y {
  background-image: url(../img/portfolio-icons/400_2.png);
}

.portfolio__item--cebu-refresh {
  background-image: url(../img/portfolio-icons/400_3.png);
}

.portfolio__item--selecta-father {
  background-image: url(../img/portfolio-icons/400_4.png);
}

.portfolio__item--nissin {
  background-image: url(../img/portfolio-icons/400_5.png);
}

.portfolio__item--cebu-safer {
  background-image: url(../img/portfolio-icons/400_6.png);
}

.portfolio__item--selecta-deals {
  background-image: url(../img/portfolio-icons/400_7.png);
}

.portfolio__item--canesten {
  background-image: url(../img/portfolio-icons/400_8.png);
}

.portfolio__item--sky-fiber {
  background-image: url(../img/portfolio-icons/400_9.png);
}

.portfolio__item--selecta-refresh {
  background-image: url(../img/portfolio-icons/400_10.png);
}

.portfolio__item--jack-jill {
  background-image: url(../img/portfolio-icons/400_11.png);
}

.portfolio__item--bam {
  background-image: url(../img/portfolio-icons/400_12.png);
}

.portfolio__item--inter {
  background-image: url(../img/portfolio-icons/400_17.png);
}

.portfolio__item--social {
  background-image: url(../img/portfolio-icons/400_13.png);
  font-size: 4.55rem;
  bottom: 1rem;
}

.portfolio__item--logos {
  background-image: url(../img/portfolio-icons/400_14.png);
  font-size: 4.55rem;
  bottom: 1rem;
}

.portfolio__item--branding {
  background-image: url(../img/portfolio-icons/400_15.png);
  font-size: 4.55rem;
  bottom: 1rem;
}

.portfolio__item--art-toys {
  background-image: url(../img/portfolio-icons/400_16.png);
  font-size: 4.55rem;
  bottom: 1rem;
}

.portfolio__item img {
  width: 100%;
  transition: all 500ms;
}

.portfolio__item--text {
  height: 33.2rem;
  width: 33.2rem;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(
    0deg,
    rgba(255, 95, 0, 0.65),
    rgba(255, 95, 0, 0.65)
  );
  background-size: cover;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s;
}

.portfolio__item--text span {
  color: #2a2b2f;
}

.portfolio__item--social .portfolio__item--text,
.portfolio__item--logos .portfolio__item--text,
.portfolio__item--branding .portfolio__item--text,
.portfolio__item--art-toys .portfolio__item--text {
  background-image: linear-gradient(
    0deg,
    rgba(255, 95, 0, 1),
    rgba(255, 95, 0, 1)
  );
}

.portfolio__item--text a:link,
.portfolio__item--text a:visited {
  color: #ebe3d2;
  text-decoration: none;
}

.portfolio__item--text a:hover,
.portfolio__item--text a:active {
  text-decoration: none;
  color: #ebe3d2;
}

.portfolio__item:hover {
  cursor: pointer;
}

.portfolio__item:hover .portfolio__item--text {
  opacity: 1;
  visibility: visible;
}

/* ******************************* */
/* BELLOW 1500px */
/* ******************************* */

@media (max-width: 93.75em) {
  .portfolio {
    max-width: 110rem;
  }

  .portfolio__tab {
    font-size: 1.563rem;
    padding: 0 1.2rem 0.4rem 1.2rem;
  }

  .portfolio__item,
  .portfolio__item--text {
    height: 25.7rem;
    width: 25.7rem;
  }
}

/* ******************************* */
/* BELLOW 1280px */
/* ******************************* */

@media (max-width: 80em) {
  .portfolio {
    max-width: 90rem;
  }

  .portfolio__tab {
    margin-bottom: 2.4rem;
  }

  .portfolio__content {
    gap: 1.6rem;
  }

  .portfolio__item,
  .portfolio__item--text {
    height: 21.3rem;
    width: 21.3rem;
  }
}

/* ******************************* */
/* BELLOW 944px (Portrait Tablets) */
/* ******************************* */

@media (max-width: 59em) {
  .logo {
    margin-bottom: 0;
  }

  .portfolio {
    max-width: 60rem;
  }

  .portfolio__content {
    grid-template-columns: repeat(2, 1fr);
    gap: 3.2rem;
  }

  .portfolio__item,
  .portfolio__item--text {
    height: 28.4rem;
    width: 28.4rem;
  }
}

/* ******************************* */
/* BELLOW 600px */
/* ******************************* */

@media (max-width: 37.5em) {
  .container {
    max-width: 45rem;
  }

  .portfolio {
    max-width: 45rem;
  }

  .portfolio__tab {
    font-size: 1.25rem;
    padding: 0 0.8rem 0.4rem 0.8rem;
  }

  .portfolio__content {
    gap: 2.4rem;
  }

  .portfolio__item,
  .portfolio__item--text {
    height: 21.3rem;
    width: 21.3rem;
  }
}

/* ******************************* */
/* BELLOW 450px (Phones) */
/* ******************************* */

@media (max-width: 28.125em) {
  .container {
    max-width: 32rem;
    max-height: 10rem;
  }

  .portfolio {
    max-width: 32rem;
  }

  .portfolio__tab {
    padding: 0 0.4rem 0.4rem 0.4rem;
  }

  .portfolio__content {
    grid-template-columns: repeat(1, 1fr);
    gap: 2.4rem;
  }

  .portfolio__item,
  .portfolio__item--text {
    height: 32rem;
    width: 32rem;
  }
}