@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* =====================================================
1600px
===================================================== */

@media (max-width: 100em) {
  html {
    font-size: 55%;
  }
  .frame {
    right: 0rem;
  }
}

/* =====================================================
1375px
===================================================== */

@media (max-width: 80em) {
  .hide {
    display: none;
  }

  .frame {
    display: none;
  }
}

/* =====================================================
1200px
===================================================== */

@media (max-width: 70em) {
  html {
    font-size: 55%;
  }
  :root {
    --grid-gap: 1.6rem;
  }

  .hide {
    display: none;
  }

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

  .nav-btn {
    letter-spacing: 0.2rem;
  }
}

/* =====================================================
960px
===================================================== */

@media (max-width: 48em) {
  :root {
    --grid-gap: 1.6rem;
  }

  html {
    font-size: 48%;
  }
  .hide {
    display: none;
  }

  .III-cols {
    grid-template-columns: none;
  }
  .box-style {
    filter: none;
    opacity: 1;
  }
  .project-name {
    transition: none;
    opacity: 1;
    top: 90%;
  }

  .logo-container .logo {
    color: var(--logo-shade);
  }

  .logo-lettering {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    transform: translateX(0rem);
  }
}

/* =====================================================
704px
===================================================== */

@media (max-width: 42em) {
  :root {
    --grid-gap: 1.6rem;
  }

  html {
    font-size: 55%;
  }

  .hide {
    display: none;
  }

  .grid {
    display: flex;
    flex-direction: column;
  }

  .home-aside {
    position: static;
  }

  .bottom-bar {
    justify-content: center;
    position: static;
    transform: none;
    font-weight: bold;
    font-size: 1.2rem;
    flex-direction: column;
    gap: var(--grid-gap);
    border-radius: 0;
    backdrop-filter: blur(0);
    color: var(--secondary-shade);
    left: 0;
    white-space: normal;
    text-align: center;
    background-color: transparent;
  }

  .box-style {
    filter: none;
  }

  .project-name {
    transition: none;
    opacity: 1;
    top: 90%;
  }

  .info-box-style {
    animation: none;
    animation: appear ease;
    animation-timeline: view();
    animation-range: entry 0% cover 35%;
  }

  .link-btn {
    width: 100%;

    align-self: none;
  }

  .grid-project {
    display: flex;
    flex-direction: column;
    gap: var(--grid-gap);
  }

  .hide-grid-project {
    display: none;
  }

  .logo-container .logo {
    color: var(--logo-shade);
  }

  .logo-lettering {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    transform: translateX(0rem);
  }
}