.project {

  .content {
    padding: 4rem 0;

    .context,
    .solution,
    .results {
      display: grid;
      grid-template-columns: 1fr 3fr;
      padding: 2rem 1rem;

      .title h2 {
        margin: .75rem .25rem;
        
        a {
          font-size: 1.5rem;
        }
      }

      .details {
        padding: 0 1rem;

        img {
          padding: 1.25rem 0;
        }
      }
    }

    .break {
      display: grid;
      grid-template-columns: 1fr 3fr;
      padding: .25rem 2rem;

      hr {
        width: 100%;
        height: .2rem;
        margin: 0 auto;
        border: none;
        color: var(--br-color);
        background-color: var(--br-color);
      }
    }
  }
}

@media only screen and (--viewport-4) {
  .project .content {
    padding: 4rem 0;

    .context,
    .solution,
    .results {
      display: block;
      padding: 2rem 2.25rem;

      .title h2 {
        margin: .75rem 0;
      }

      .details {
        padding: 0;
      }
    }

    .break {
      display: block;
      padding: .25rem 1.5rem;
    }
  }
}