Screen.js

import React from 'react';

const Mac = ({ isMobile, children }) => {
  return (
    <div className="mac-wrapper">
      <div className="screen-section">
      </div>
      <style jsx>{`
        .mac-wrapped {
            width: ${cw}px;
            max-width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            perspective: 800px;
        }

        .screen-section {
            height: ${screenHeight}px;
            width: ${screenWidth}px;
            background: black;
            border-radius: 15px 15px 5px 5px;
            border-top: 2px #1e1e1e solid;
            border-left: 2px #1e1e1e solid;
            border-right: 2px #1e1e1e solid;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.9), 0 6px 20px 0 rgba(0, 0, 0, 0.19), 0 0 0 3px #7D7D7D;
        }
    `}
      </style>
    </div>
  );
};

export default Mac;