/*=============== BREAKPOINTS ===============*/
/* For small devices */
@media screen and (max-width: 300px) {
  .container {
    margin-inline: 1rem;
  }

  .skills__content {
    grid-template-columns: repeat(2, max-content);
  }
}

/* For medium devices */
@media screen and (min-width: 540px) {
  .home__container,
  .work__container,
  .info__container,
  .services__container,
  .contact__container {
    grid-template-columns: 350px;
    justify-content: center;
  }
}

@media screen and (min-width: 768px) {
  .nav__menu {
    width: 50%;
  }
  .home__container {
    grid-template-columns: repeat(2, 350px);
  }
  .home__data {
    align-self: flex-end;
    padding-bottom: 3rem;
    order: -1;
  }
  .home__scroll {
    grid-column: 1 / 3;
  }
  .work__container {
    grid-template-columns: repeat(2, 350px);
  }
  .info__container {
    grid-template-columns: initial;
  }
  .about {
    grid-template-columns: repeat(2, 350px);
    align-items: center;
  }
  .about__content {
    order: 1;
  }
  .experience__data {
    grid-template-columns: repeat(2, 1fr);
  }
  .skills__content {
    grid-template-columns: repeat(5, max-content);
    justify-content: initial;
    column-gap: 4rem;
  }
  .services__container {
    grid-template-columns: repeat(2, 320px);
  }
}

/* For large devices */
@media screen and (min-width: 1150px) {
  .container {
    margin-inline: auto;
  }
  .section {
    padding-block: 10rem 13.5rem;
  }
  .section__title {
    margin-top: 0px;
    margin-bottom: 4rem;
  }
  .nav {
    height: calc(var(--header-height) + 2rem);
  }
  .nav__toggle,
  .nav__close {
    display: none;
  }
  .nav__menu {
    width: initial;
  }
  .nav__list {
    flex-direction: row;
    column-gap: 4rem;
  }
  .home__container {
    grid-template-columns: 375px 350px;
    gap: 3rem 16rem;
  }
  .home__img {
    width: 420px;
  }
  .home__name {
    margin-bottom: 1.5rem;
  }
  .home__profession::after {
    bottom: -1rem;
    width: 35%;
  }
  .work__container {
    grid-template-columns: repeat(2, 540px);
    gap: 2rem;
  }
  .work__link {
    padding: 3rem 3rem 2rem;
  }
  .work__title {
    font-size: var(--h2-font-size);
    margin-bottom: 1rem;
  }
  .work__link i {
    font-size: 2rem;
  }
  .info__container {
    row-gap: 4rem;
  }
  .info__title {
    font-size: var(--normal-font-size);
    margin-bottom: 3.5rem;
  }
  .about {
    grid-template-columns: 320px 420px;
    column-gap: 11.5rem;
  }
  .about__img {
    width: 320px;
  }
  .about__description {
    margin-bottom: 3rem;
  }
  .about__button {
    width: initial;
  }
  .experince__content {
    row-gap: 4rem;
  }
  .experience__data {
    grid-template-columns: 320px 380px;
    column-gap: 11.5rem;
  }
  .experince__company {
    font-size: var(--h1-font-size);
  }
  .experience__profession {
    margin-bottom: 0.5rem;
  }
  .experience__date {
    font-size: var(--normal-font-size);
    margin-bottom: 1.5rem;
  }
  .skills__content {
    grid-template-columns: repeat(6, max-content);
  }
  .services__container {
    grid-template-columns: repeat(2, 350px);
    gap: 6rem 13rem;
  }
  .services__icon {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
  }
  .contact__container {
    grid-template-columns: 580px;
  }
  .contact__group {
    grid-template-columns: repeat(2, 1fr);
  }
  .contact__area {
    height: 15rem;
  }
  .contact__button {
    width: max-content;
    justify-self: center;
    margin-top: 1.5rem;
  }
  .contact__message {
    bottom: 4.5rem;
  }
  .contact__social {
    grid-template-columns: repeat(3, max-content);
    column-gap: 5rem;
  }
  .footer__container {
    padding-block: 3rem;
    grid-template-columns: repeat(2, max-content);
    justify-content: space-between;
  }
  .footer__links {
    column-gap: 4rem;
    order: 1;
  }
  .scrollup {
    right: 3rem;
  }
}