/* Tablet */
@media (max-width: 1024px) {
  .skills article.grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
  .skill-item {
    margin: 0.5rem;
  }
  .about article.flex-container {
    flex-direction: column;
    align-items: center;
  }
  .about h2 {
    text-align: left;
  }
}

/* Mobile */
@media (max-width: 768px) {  
  .skills article.grid-container {
    grid-template-columns: 1fr;
  }

  .flex-container {
    flex-direction: column;
  }

  .divider {
    width: 250px;
    height: 1px;
  }

  .burger-menu-btn {
    display: block;
    align-self: flex-end;
    top: 10px;
    right: 15px;
    position: absolute;
    z-index: 15;
  }

  line {
    transition: all 0.3s ease-in-out;
    transform-box: fill-box;
    transform-origin: center;    
    stroke: var(--pink);
  }

  #burger-icon.active .line1 {
    transform: translateY(10px) rotate(45deg);
  }

  #burger-icon.active .line2 {
    opacity: 0;
  }

  #burger-icon.active .line3 {
    transform: translateY(-10px) rotate(-45deg);
  }

  #navbar {
    z-index: 10;
    border: none;
  }

  .main-menu {
    position: absolute;
    top: -1000px;
    min-height: 100vh;
    min-width: 100vw;
    background-color: #f2f2f2;
    text-align: center;
    transition: all 0.3s ease-in-out;
    padding: 0;
  }

  .main-menu.collapsed {
    top: -20px;
  }

  .main-menu li {
    border-bottom: solid gainsboro 1px;
    width: 90%;
    align-self: center;
  }

  .menu-item {
    color: var(--pink);
  }

  .menu-item.active::after, .menu-item:target-current::after {
    transform: scaleX(0)
  }

  .contact article.flex-container {
    gap: 1rem;
  }  

  .contact .contact-item img {
    margin-bottom: 1rem;
  }  
}