/* Media queries */

/* ===================
   Tablet (≥750px) M
   =================== */
@media (min-width: 750px) {
  /* Main elements */
  header,
  main,
  footer {
    margin: 0 auto;
    width: 80%;
    max-width: 800px;
  }
  /* Main-container*/
  .main-container,
  .header-container {
    grid-template-columns: repeat(12, 1fr);
  }
  /* Profile container */
  .profile-container {
    /* max-width: 90%; */
    padding-left: var(--spacing-xl);
    margin: 0 auto;
  }
  /* About, Profile container */
  .about-container,
  .profile-container {
    margin: 0 var(--spacing-m);
  }
  /* Blog container */
  .blog-container {
    grid-column: 2/9;
  }
  /* Aside container */
  aside {
    display: block;
    grid-column: 9/12;
    grid-row: 5/8;
    background-color: var(--primary-color);
    min-width: 20rem;
  }
  aside h3 {
    margin-top: var(--spacing-m);
    margin-left: var(--spacing-m);
  }
  aside ul {
    border-bottom: 3px solid var(--background-color);
    box-shadow: var(--boxShadow);
  }
}

/* ===================
   Laptop (≥1024px) L
   =================== */
@media (min-width: 1024px) {
  .hero-content-container h2 {
    font-size: var(--font-size-xxl);
  }
  .hero-content-container h3 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
  }
  .about-container {
    margin: 0 var(--spacing-xl);
  }
  .profile-container,
  .skills-container,
  .about-container p {
    font-size: var(--font-size-m);
  }
}
/* ===================
   Desktop (≥1200px) XL
   =================== */
@media (min-width: 1200px) {
  .about-container {
    margin: 0 var(--spacing-xxl);
  }
  .hero-content-container h2 {
    font-size: var(--font-size-xxxl);
  }
}