title: CSS calc(); to position a div
body: <p>I'm attempting to create a div that has a width and height of 37% of the view width.</p>
  <p>I want the div to be centered in the middle so I attempted to take 50% of the view width and subtract the 37% value.</p>
  <p>I then want the div to sit 50% outside of the parent div. It's basically a cover photo with a profile image. The bottom position would need to be negative in order to force the business-cover-logo outside the business-view-wrapper and the only way I could think of was multiply by a negative number.</p>
  <pre><code>&lt;div class=&quot;business-view-cover&quot;&gt;
      &lt;div class=&quot;business-cover-logo&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  .business-view-cover {
      position: relative;
      height: calc(100vw * 0.5625);
      background-size: cover;
      background-position: center center;
      background-image: url('../images/business-cover-1.png');
  
      .business-cover-logo {
          position: absolute;
          --width-profile: calc(100vw * 0.37);
          --half-width: calc(var(--width-profile) / 2);
          --profile-bottom: calc(-1 * var(--half-width));
          bottom: calc(var(--profile-bottom) * -1);
          left: calc(50vw - var(--width-profile));
          width: var(--width-profile);
          height: var(--width-profile);
          border: 4px solid $e1-background-grey;
          border-radius: 1.6rem;
          background-size: cover;
          background-position: center center;
          background-image: url('../images/logo-cover-napa.png');
      }
  }
  </code></pre>
  <p>Example of it working with fixed values.</p>
  <pre><code>.business-view-cover {
      position: relative;
      height: calc(100vw * 0.5625);
      background-size: cover;
      background-position: center center;
      background-image: url('../images/business-cover-1.png');
  
      .business-cover-logo {
          position: absolute;
          bottom: -7.65rem;
          left: calc(50vw - 7.65rem);
          width: 15.3rem;
          height: 15.3rem;
          border: 4px solid $e1-background-grey;
          border-radius: 1.6rem;
          background-size: cover;
          background-position: center center;
          background-image: url('../images/logo-cover-napa.png');
      }
  }
  </code></pre>