/**************************************/
/* MEDIA QUERIES */
/**************************************/

/* MONITOR LARGE */

@media (min-width: 101em) {
  .nav-header {
    width: 160rem;
    left: 50%;
    transform: translateX(-50%);
  }

  .container {
    width: 160rem;
  }

  .section-state {
    width: 160rem;
    margin: 12.8rem auto;
  }
}

/* LAPTOP LARGE */

@media (max-width: 87em) {
  html {
    font-size: calc(9 / 16 * 100%);
  }

  .section-hero {
    background-position: 25% 50%;
    background-size: 200%;
  }

  .nav-header {
    padding: 6.4rem;
  }

  .design-img {
    width: 85rem;
  }

  .container {
    padding: 0 8rem;
  }

  .secondary-header {
    font-size: 3.6rem;
  }
}

/* LAPTOP MEDIUM */

@media (max-width: 67em) {
  .nav-header {
    padding: 6.4rem;
    gap: 6.4rem;
  }

  .nav-bar {
    width: 100%;
  }

  .primary-header {
    font-size: 5.2rem;
  }

  .design-img {
    width: 75rem;
  }

  .container {
    padding: 0 6.4rem;
  }

  .column-gap-md {
    column-gap: 4.8rem;
  }

  .design-description,
  .state-description {
    font-size: 1.6rem;
  }

  .tertiary-header {
    font-size: 2.6rem;
  }

  .section-state {
    padding: 8rem;
  }

  .state {
    column-gap: 0;
  }
}

/* LAPTOP / TABLET LARGE */

@media (max-width: 60em) {
  .section-hero {
    background: url(../images/bg-pattern-intro-desktop.svg),
      linear-gradient(to bottom, hsl(13, 100%, 72%), hsl(353, 100%, 62%));
    background-position: 50% 40%;
    background-size: 200%;
  }

  .hero {
    padding: 24rem 3.2rem 20rem 3.2rem;
    height: 70rem;
  }

  .hero-description {
    font-family: var(--font-headers);
  }

  .nav-header {
    justify-content: space-between;
  }

  .menu {
    display: block;
    cursor: pointer;
  }

  .nav-header {
    padding: 6.4rem 4.8rem;
  }

  .nav-bar {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  .nav-open .menu-icon {
    display: none;
  }

  .nav-open .close-icon {
    display: block;
  }

  .nav-open .main-nav {
    width: 100%;
    justify-content: center;
    border-bottom: solid 1px hsla(206, 13%, 34%, 0.1);
  }

  .nav-open .nav-bar {
    max-width: 60%;
    font-size: 2.4rem;
    font-weight: 500;
    background-color: hsl(0, 100%, 100%);
    color: hsl(237, 17%, 21%);
    box-shadow: 0px 12px 16px 6px hsla(206, 13%, 34%, 0.25);
    padding: 4.8rem;
    border-radius: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 2.4rem;

    visibility: visible;
    opacity: 1;
    pointer-events: all;
    top: 80%;
    left: 50%;
    transform: translate(-25%);
    z-index: 1;
  }

  .nav-link-connect,
  .nav-link-company,
  .nav-link-product {
    width: 100%;
  }

  .nav-open .nav-links--lists {
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-bottom: 2.4rem;
  }

  .nav-open .btns-container {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
  }

  .modal-nav {
    width: 100%;
    margin: 2.4rem 0 0;
    background-color: hsla(206, 13%, 34%, 0.1);
    position: static;
    box-shadow: none;
  }

  .nav-open .modal-nav-links {
    gap: 2.4rem;
  }

  .nav-open .modal-nav-link {
    color: hsl(237, 23%, 31%);
  }

  .nav-open .icon-arrow {
    width: 1.6rem;
  }

  .nav-open .btn-login {
    font-size: 2.4rem;
    margin: 0;
    color: hsl(237, 17%, 21%);
    text-align: center;
  }

  .nav-open .btn-full {
    font-size: 2.4rem;
    color: hsl(0, 100%, 100%);
    background: linear-gradient(
      to bottom,
      hsl(13, 100%, 72%),
      hsl(353, 100%, 62%)
    );
  }

  .grid--2-cols {
    grid-template-columns: 1fr;
  }

  .design-img-box {
    grid-column: 1/2;
    grid-row: 1/-2;
  }

  .design-img {
    position: relative;
  }

  .editor-img {
    width: 60rem;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .laptop-img {
    width: 70rem;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, -50%);
  }

  .section-design {
    padding: 9.6rem 0;
  }

  .section-state {
    margin: 22.4rem 0 0 0;
    padding: 12.8rem 3.2rem;
    background: url(../images/bg-pattern-circles.svg),
      linear-gradient(to right, hsl(237, 17%, 21%), hsl(237, 23%, 31%));
    background-position: 50% 100%;
    background-size: 100%;
    background-repeat: no-repeat;
  }

  .container {
    padding: 0 3.2rem;
    row-gap: 3.6rem;
  }

  .secondary-header {
    font-weight: 500;
    margin-bottom: 6.4rem;
  }

  .tertiary-header {
    font-size: 3rem;
    font-weight: 500;
  }

  .design-description {
    font-family: var(--font-headers);
    font-size: 2rem;
    font-weight: 400;
  }

  .design-text-box {
    text-align: center;
    padding: 0 6.4rem;
  }

  .state {
    grid-template-columns: 1fr;
    gap: 3.6rem;
  }

  .state-text-box {
    padding: 0 3.2rem;
    text-align: center;
  }

  .state-header {
    font-size: 3.6rem;
    margin-bottom: 2.4rem;
  }

  .state-description {
    font-size: 1.8rem;
    font-weight: 400;
  }

  .state-img-box {
    height: 16rem;
  }

  .state-img {
    max-width: 50rem;
    top: -50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

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

/* SMALL TABLETS/ PHONES */

@media (max-width: 44em) {
  html {
    font-size: calc(8 / 16 * 100%);
  }

  .primary-header {
    font-weight: 400;
    font-size: 4.4rem;
  }

  .design-img {
    width: 100%;
  }

  .footer-container {
    font-size: 2rem;
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .footer-title {
    font-size: 2.4rem;
  }

  .footer-logo {
    margin-bottom: 3.2rem;
  }

  .design-text-box {
    padding: 0 3.2rem;
  }
}

/* SMALL PHONES */
@media (max-width: 30em) {
  .section-hero {
    background: url(../images/bg-pattern-intro-desktop.svg),
      linear-gradient(to bottom, hsl(13, 100%, 72%), hsl(353, 100%, 62%));
    background-position: 40% 10%;
    background-size: 250%;
  }

  .section-state {
    background: url(../images/bg-pattern-circles.svg),
      linear-gradient(to right, hsl(237, 17%, 21%), hsl(237, 23%, 31%));
    background-position: 50% -350%;
    background-size: 150%;
    background-repeat: no-repeat;
  }

  .nav-open .nav-bar {
    max-width: 85%;
    left: 50%;
    transform: translateX(-50%);
  }

  .design-text-box {
    padding: 0;
  }

  .tertiary-header {
    padding: 0 3.2rem;
  }
}