/* For Mobile Phones Portrait or Landscape View */
@media screen and (max-device-width: 767px) {
  :root {
    /* Width */
    --viewport-standard: 328px;
    --viewport-standard-article: 328px;
    --viewport-standard-aside: 328px;
  }

  h1 {
    font-size: 30px;
    line-height: 40px;
  }

  h2 {
    font-size: 24px;
    line-height: 32px;
  }

  body > header {
    & > div {
      gap: var(--spacing-3);
    }

    & span {
      font-size: 13px;
      line-height: 20px;
    }

    & summary {
      width: 2rem;

      & > span {
        display: none;
      }
    }
  }

  section[role="navigation"] {
    background-color: var(--secondary-1);

    & nav {
      & > .navigation-mobile {
        display: block;
        padding-top: var(--spacing-2);
        padding-bottom: var(--spacing-2);

        & > summary {
          display: flex;
          align-items: center;

          &::before {
            margin-right: var(--spacing-2);
          }
        }

        & > ul {
          display: none;
          position: absolute;
          left: 0;
          padding: 0;
          margin: 0;
          z-index: 2;
          width: 100vw;
          padding-top: var(--spacing-4);
          padding-bottom: var(--spacing-4);
          margin-top: var(--spacing-2);
          background-color: var(--white);
          border-top: 2px solid;
          border-bottom: 2px solid;
          border-color: var(--border-secondary-1);
          list-style-type: none;

          & > li {
            padding-left: var(--spacing-4);
            padding-right: var(--spacing-4);
          }
        }

        & a {
          text-decoration: underline;
          color: var(--black);

          & > h4 {
            margin: 0;
          }
        }
      }

      & > .navigation-mobile[open] {
        & ul {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: var(--spacing-4);

          & > li {
            width: var(--viewport-standard);
          }
        }
      }

      & > .navigation-web {
        display: none;
      }
    }
  }

  section[role="search"] > div {
    flex-direction: column;
  }

  section[role="heading"] {
    background-color: var(--secondary-background-1);
  }

  button {
    &[role="button"] {
      width: 100%;
      justify-content: center;
    }

    &[role="link"] {
      width: 100%;

      & > a {
        justify-content: center;
      }
    }
  }

  .home-top {
    background: var(--primary-1);

    & > div {
      padding-bottom: var(--spacing-3);
      padding-top: var(--spacing-3);
      padding-left: var(--spacing-3);
      padding-right: var(--spacing-3);
    }

    & search {
      width: var(--viewport-standard);
    }
  }

  .page-top {
    & > div {
      padding-bottom: var(--spacing-3);
      padding-top: var(--spacing-3);
    }

    & p, & search {
      width: var(--viewport-standard);
    }
  }

  .standard-viewport-section-aside {
    flex-direction: column;

    & > article {
      order: 1;
    }

    & > aside {
      order: 2;
    }
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .faq-collapsible > summary {
    font-size: 14px;
    line-height: 24px;
    word-break: break-word;
  }

  .button-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2);

    & > form {
      width: 100%
    }

    & > [role="separator"] {
      margin-top: var(--spacing-2);
      margin-bottom: var(--spacing-2);
    }
  }

  .double-button-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--spacing-2);

    & > [role="separator"] {
      margin-top: var(--spacing-2);
      margin-bottom: var(--spacing-2);
    }
  }

  .service-description > .files-section > div {
    grid-template-columns: 1fr;
  }

  .application-view-article > .files-section > div {
    grid-template-columns: 1fr;
  }

  .breadcrumbs-mobile {
    display: flex;
  }

  .breadcrumbs-web {
    display: none;
  }

  body > footer {
    & p {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-4);
    }

    & a {
      display: flex;
      align-items: center;
    }

    & > div::after {
      display: none;
    }
  }

  .success-banner,
  .error-banner,
  .info-banner {
    padding-top: var(--spacing-5);
    padding-bottom: var(--spacing-5);
    padding-left: var(--spacing-3);
    padding-right: var(--spacing-3);
  }

  .search-bar > form {
    display: flex;
    flex-direction: column;

    & > label {
      width: 100%;
    }
  }

  .review-form,
  .application-view-article {
    width: var(--viewport-standard);

    & > ul{
      & > li:not(:has(details)),
      & > li > details > ul > li:not(:has(details), :has(h5)) {
        align-items: start;
        flex-direction: column;
        gap: var(--spacing-3);
      }
    }
  }
}

/* For Tablet View */
@media screen and (min-device-width: 768px) and (max-device-width: 1200px) {
  :root {
    /* Width */
    --viewport-standard: 736px;
    --viewport-standard-article: 736px;
    --viewport-standard-aside: 736px;
    --viewport-small: 568px;
  }

  body > header {
    & > div {
      gap: var(--spacing-9);
    }

    & span {
      font-size: 13px;
      line-height: 20px;
    }
  }

  section[role="navigation"] {
    background-color: var(--secondary-1);

    & nav {
      & > .navigation-mobile {
        display: block;
        padding-top: var(--spacing-2);
        padding-bottom: var(--spacing-2);

        & > summary {
          display: flex;
          align-items: center;

          &::before {
            margin-right: var(--spacing-2);
          }
        }

        & > ul {
          display: none;
          position: absolute;
          left: 0;
          padding: 0;
          margin: 0;
          z-index: 2;
          width: 100vw;
          padding-top: var(--spacing-4);
          padding-bottom: var(--spacing-4);
          margin-top: var(--spacing-2);
          background-color: var(--white);
          border-top: 2px solid;
          border-bottom: 2px solid;
          border-color: var(--border-secondary-1);
          list-style-type: none;

          & > li {
            padding-left: var(--spacing-4);
            padding-right: var(--spacing-4);
          }
        }

        & a {
          text-decoration: underline;
          color: var(--black);

          & > h4 {
            margin: 0;
          }
        }
      }

      & > .navigation-mobile[open] {
        & ul {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: var(--spacing-4);

          & > li {
            width: var(--viewport-standard);
          }
        }
      }

      & > .navigation-web {
        display: none;
      }
    }
  }

  section[role="search"] > div {
    justify-content: center;
  }

  section[role="heading"] {
    background-color: var(--secondary-background-1);
  }

  .home-top {
    & > div {
      padding-bottom: var(--spacing-9);
      padding-top: var(--spacing-9);
      padding-left: var(--spacing-3);
      padding-right: var(--spacing-3);
    }

    & h1, & search {
      width: var(--viewport-small);
    }
  }

  .page-top {
    & > div {
      padding-bottom: var(--spacing-5);
      padding-top: var(--spacing-5);
    }

    & p, & search {
      width: var(--viewport-small);
    }
  }

  .standard-viewport-section-aside {
    flex-direction: column;

    & > article {
      order: 1;
    }

    & > aside {
      order: 2;
    }
  }

  .services-grid {
    grid-template-columns: 1fr 1fr;
  }

  .faq-collapsible > summary {
    font-size: 14px;
    line-height: 24px;
    word-break: break-word;
  }

  .service-description > .files-section > div {
    grid-template-columns: 1fr 1fr;
  }

  .breadcrumbs-mobile {
    display: flex;
  }

  .breadcrumbs-web {
    display: none;
  }

  body > footer {
    & img {
      display: none;
    }
  }

  .review-form,
  .application-view-article {
    width: var(--viewport-standard);
  }
}