@media (min-width: 901px) {
  .portfolio {
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .gallery {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: clamp(210px, 18vw, 300px);
    grid-auto-flow: dense;
    gap: 10px;
  }

  .gallery .work,
  .gallery .work.tall,
  .gallery .work.wide {
    grid-column: span 3;
    grid-row: span 1;
    min-width: 0;
  }

  .gallery .work:nth-child(1) {
    grid-column: span 6;
    grid-row: span 2;
  }

  .gallery .work:nth-child(4) {
    grid-column: span 6;
  }

  .gallery .work:nth-child(5),
  .gallery .work:nth-child(8) {
    grid-column: span 3;
  }

  .work {
    isolation: isolate;
    outline: 1px solid rgba(255, 255, 255, .08);
    outline-offset: -1px;
  }

  .work::before {
    content: "VER PROJETO";
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 3;
    padding: 8px 10px;
    background: var(--red);
    color: #fff;
    font: 600 .62rem var(--body);
    letter-spacing: .12em;
    opacity: 0;
    transform: translateY(-8px);
    transition: .3s ease;
  }

  .work:hover::before {
    opacity: 1;
    transform: none;
  }

  .work span {
    left: 24px;
    bottom: 22px;
  }

  .work b {
    font-size: 1.75rem;
  }

  .work small {
    margin-top: 4px;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .gallery {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: 260px;
  }

  .gallery .work,
  .gallery .work.tall,
  .gallery .work.wide {
    grid-column: span 2;
  }

  .gallery .work:nth-child(1) {
    grid-column: span 4;
    grid-row: span 2;
  }

  .gallery .work:nth-child(4) {
    grid-column: span 4;
  }
}