created layout

src/App.js

@@ -1,7 +1,26 @@
 import "./sass/main.scss";
+import Sidebar from "./commons/sidebar";
+import Header from "./commons/header";
+import Features from "./commons/features";
+import Stories from "./commons/stories";
+import Homes from "./commons/homes";
+import Gallery from "./commons/gallery";
+import Footer from "./commons/footer";
+import Realtors from "./commons/realtors";
 
 function App() {
-  return <div></div>;
+  return (
+    <div className="container">
+      <Sidebar />
+      <Header />
+      <Realtors />
+      <Features />
+      <Stories />
+      <Homes />
+      <Gallery />
+      <Footer />
+    </div>
+  );
 }
 
 export default App;

src/commons/features.jsx

@@ -0,0 +1,3 @@
+export default function Features() {
+  return <section className="features">Features</section>;
+}

src/commons/footer.jsx

@@ -0,0 +1,3 @@
+export default function Footer() {
+  return <footer className="footer">Footer</footer>;
+}

src/commons/gallery.jsx

@@ -0,0 +1,3 @@
+export default function Gallery() {
+  return <section className="gallery">Gallery</section>;
+}

src/commons/header.jsx

@@ -0,0 +1,3 @@
+export default function Header() {
+  return <header className="header">Header</header>;
+}

src/commons/homes.jsx

@@ -0,0 +1,3 @@
+export default function Homes() {
+  return <section className="homes">Homes</section>;
+}

src/commons/img/sprite.svg

@@ -0,0 +1,44 @@
+<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<defs>
+<symbol id="icon-heart-full" viewBox="0 0 32 32">
+<title>heart-full</title>
+<path d="M16.042 8.345c0 0-2-4.262-6.5-4.262-4.917 0-7.5 4.167-7.5 8.333 0 6.917 14 15.5 14 15.5s13.916-8.5 13.916-15.5c0-4.25-2.666-8.333-7.416-8.333s-6.5 4.262-6.5 4.262z"></path>
+</symbol>
+<symbol id="icon-presentation" viewBox="0 0 31 32">
+<title>presentation</title>
+<path d="M0.5 3c-0.276 0-0.5 0.224-0.5 0.5v17c0 0.827 0.673 1.5 1.5 1.5h28c0.827 0 1.5-0.673 1.5-1.5v-17c0-0.276-0.224-0.5-0.5-0.5s-0.5 0.224-0.5 0.5v17c0 0.276-0.224 0.5-0.5 0.5h-28c-0.276 0-0.5-0.224-0.5-0.5v-17c0-0.276-0.224-0.5-0.5-0.5zM32.5 0h-34c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h34c0.276 0 0.5-0.224 0.5-0.5s-0.224-0.5-0.5-0.5zM11.854 8.146c-0.183-0.183-0.475-0.196-0.674-0.031l-6 5c-0.212 0.177-0.241 0.492-0.064 0.705 0.177 0.212 0.491 0.241 0.705 0.064l5.649-4.708 5.677 5.677c0.097 0.098 0.225 0.147 0.353 0.147s0.256-0.049 0.354-0.146l7.146-7.147v3.793c0 0.276 0.224 0.5 0.5 0.5s0.5-0.224 0.5-0.5v-5c0-0.065-0.013-0.13-0.038-0.191-0.051-0.122-0.148-0.22-0.271-0.271-0.061-0.025-0.126-0.038-0.191-0.038h-5c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h3.793l-6.793 6.793-5.646-5.647zM8.057 31.732c0.128 0.245 0.43 0.339 0.675 0.211l6.768-3.545 6.768 3.545c0.074 0.039 0.153 0.057 0.232 0.057 0.18 0 0.354-0.098 0.443-0.268 0.128-0.245 0.034-0.547-0.211-0.675l-6.893-3.61c0.098-0.091 0.161-0.219 0.161-0.364v-2.583c0-0.276-0.224-0.5-0.5-0.5s-0.5 0.224-0.5 0.5v2.583c0 0.144 0.063 0.272 0.161 0.363l-6.893 3.61c-0.245 0.129-0.339 0.431-0.211 0.676z"></path>
+</symbol>
+<symbol id="icon-expand" viewBox="0 0 32 32">
+<title>expand</title>
+<path d="M32 30.5v-29c0-0.827-0.673-1.5-1.5-1.5h-29c-0.827 0-1.5 0.673-1.5 1.5v9c0 0.276 0.224 0.5 0.5 0.5s0.5-0.224 0.5-0.5v-9c0-0.276 0.225-0.5 0.5-0.5h29c0.275 0 0.5 0.224 0.5 0.5v29c0 0.276-0.225 0.5-0.5 0.5h-9c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h9c0.827 0 1.5-0.673 1.5-1.5zM1.5 13c-0.827 0-1.5 0.673-1.5 1.5v16c0 0.827 0.673 1.5 1.5 1.5h16c0.827 0 1.5-0.673 1.5-1.5v-16.793l7-7v6.793c0 0.276 0.224 0.5 0.5 0.5s0.5-0.224 0.5-0.5v-8c0-0.276-0.224-0.5-0.5-0.5h-8c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h6.792l-7 7h-16.792zM18 30.5c0 0.276-0.225 0.5-0.5 0.5h-16c-0.275 0-0.5-0.224-0.5-0.5v-16c0-0.276 0.225-0.5 0.5-0.5h16.5v16.5z"></path>
+</symbol>
+<symbol id="icon-lock" viewBox="0 0 28 32">
+<title>lock</title>
+<path d="M14 0c-5.514 0-10 4.486-10 10v3h-1.5c-1.378 0-2.5 1.122-2.5 2.5v14c0 1.378 1.122 2.5 2.5 2.5h23c1.378 0 2.5-1.122 2.5-2.5v-14c0-1.378-1.122-2.5-2.5-2.5h-1.5v-3c0-5.514-4.486-10-10-10zM5 10c0-4.962 4.038-9 9-9s9 4.038 9 9v3h-3v-3c0-3.309-2.691-6-6-6s-6 2.691-6 6v3h-3v-3zM19 13h-10v-3c0-2.757 2.243-5 5-5s5 2.243 5 5v3zM12.293 21l-5 5h-4.586l5-5h4.586zM18.293 21l-5 5h-4.586l5-5h4.586zM24.293 21l-5 5h-4.586l5-5h4.586zM27 21v5h-6.293l5-5h1.293zM1.293 26h-0.293v-5h5.293l-5 5zM25.5 31h-23c-0.827 0-1.5-0.673-1.5-1.5v-2.5h26v2.5c0 0.827-0.673 1.5-1.5 1.5zM27 15.5v4.5h-26v-4.5c0-0.827 0.673-1.5 1.5-1.5h23c0.827 0 1.5 0.673 1.5 1.5z"></path>
+</symbol>
+<symbol id="icon-trophy" viewBox="0 0 34 32">
+<title>trophy</title>
+<path d="M25.5 1c0.276 0 0.5-0.224 0.5-0.5s-0.224-0.5-0.5-0.5h-17c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h17zM25.5 2h-19c-3.283 0-4.813 1.166-5.519 2.144-0.864 1.2-1.026 2.803-0.456 4.514 0.882 2.646 3.846 5.825 5.668 7.237 0.092 0.071 0.2 0.105 0.307 0.105 0.149 0 0.297-0.066 0.396-0.194 0.169-0.218 0.129-0.532-0.089-0.702-1.674-1.296-4.525-4.342-5.332-6.763-0.467-1.397-0.354-2.68 0.318-3.612 0.815-1.131 2.442-1.729 4.707-1.729h1.5v9.5c0 6.726 6.673 10.601 8.036 11.322-0.021 0.056-0.036 0.115-0.036 0.178v2.5c0 0.276 0.224 0.5 0.5 0.5s0.5-0.224 0.5-0.5v-2.5c0-0.058-0.015-0.112-0.033-0.164 1.514-0.712 9.033-4.586 9.033-11.336v-9.5h1.5c2.265 0 3.892 0.598 4.707 1.729 0.672 0.932 0.785 2.215 0.318 3.613-0.63 1.891-3.769 5.553-5.332 6.763-0.218 0.169-0.258 0.483-0.089 0.702 0.099 0.127 0.247 0.193 0.396 0.193 0.107 0 0.215-0.034 0.307-0.104 1.732-1.342 4.961-5.119 5.668-7.237 0.57-1.711 0.408-3.314-0.456-4.514-0.706-0.979-2.236-2.145-5.519-2.145h-2zM25 12.5c0 6.093-7.152 9.804-8.486 10.443-1.228-0.665-7.514-4.367-7.514-10.443v-9.5h16v9.5zM11 28c-1.141 0-2 0.86-2 2v1.5c0 0.276 0.224 0.5 0.5 0.5h14c0.276 0 0.5-0.224 0.5-0.5v-1.425c0-1.163-0.879-2.075-2-2.075h-11zM23 30.075v0.925h-13v-1c0-0.589 0.411-1 1-1h11c0.57 0 1 0.462 1 1.075z"></path>
+</symbol>
+<symbol id="icon-key" viewBox="0 0 32 32">
+<title>key</title>
+<path d="M14.683 14.698c0.117 0 0.235-0.041 0.33-0.124l11.317-9.922-0.66-0.752-11.317 9.921c-0.208 0.182-0.229 0.498-0.046 0.706 0.099 0.113 0.237 0.171 0.376 0.171zM10.188 32c6.142 0 9.812-4.83 9.812-9.5 0-1.346-0.322-2.829-0.798-3.792l4.522-2.261c0.169-0.085 0.276-0.258 0.276-0.447v-4h3c0.011 0 0.102-0.006 0.113-0.006 0.666-0.045 0.865-0.257 0.887-0.994v-4h3c0.129 0 0.218 0.014 0.278 0.023 0.121 0.019 0.347 0.054 0.543-0.122 0.202-0.18 0.193-0.408 0.185-0.609-0.002-0.072-0.006-0.167-0.006-0.292v-4.531c0-0.81-0.659-1.469-1.469-1.469h-3.875c-0.354 0-0.698 0.129-0.969 0.364l-13.187 11.56c-0.649-0.13-1.63-0.299-2.313-0.299-5.617 0-10.187 4.57-10.187 10.187s4.57 10.188 10.188 10.188zM10.188 12.625c0.501 0 1.359 0.12 2.354 0.328 0.155 0.034 0.314-0.010 0.432-0.113l13.371-11.722c0.087-0.076 0.198-0.118 0.311-0.118h3.875c0.259 0 0.469 0.21 0.469 0.469v4.531h-3.5c-0.276 0-0.5 0.224-0.5 0.5v4.5h-3.5c-0.276 0-0.5 0.224-0.5 0.5v4.191l-4.724 2.362c-0.131 0.065-0.227 0.186-0.262 0.328s-0.006 0.293 0.080 0.412c0.44 0.607 0.906 2.114 0.906 3.707 0 4.178-3.296 8.5-8.812 8.5-5.066 0-9.188-4.122-9.188-9.188s4.122-9.187 9.188-9.187zM8.5 27c1.93 0 3.5-1.57 3.5-3.5s-1.57-3.5-3.5-3.5-3.5 1.57-3.5 3.5 1.57 3.5 3.5 3.5zM8.5 21c1.378 0 2.5 1.122 2.5 2.5s-1.122 2.5-2.5 2.5-2.5-1.122-2.5-2.5 1.122-2.5 2.5-2.5z"></path>
+</symbol>
+<symbol id="icon-profile-male" viewBox="0 0 36 32">
+<title>profile-male</title>
+<path d="M0.5 31.983c0.268 0.067 0.542-0.088 0.612-0.354 1.030-3.843 5.216-4.839 7.718-5.435 0.627-0.149 1.122-0.267 1.444-0.406 2.85-1.237 3.779-3.227 4.057-4.679 0.034-0.175-0.029-0.355-0.165-0.473-1.484-1.281-2.736-3.204-3.526-5.416-0.022-0.063-0.057-0.121-0.103-0.171-1.045-1.136-1.645-2.337-1.645-3.294 0-0.559 0.211-0.934 0.686-1.217 0.145-0.087 0.236-0.24 0.243-0.408 0.221-5.094 3.849-9.104 8.299-9.13 0.005 0 0.102 0.007 0.107 0.007 4.472 0.062 8.077 4.158 8.206 9.324 0.004 0.143 0.068 0.277 0.178 0.369 0.313 0.265 0.459 0.601 0.459 1.057 0 0.801-0.427 1.786-1.201 2.772-0.037 0.047-0.065 0.101-0.084 0.158-0.8 2.536-2.236 4.775-3.938 6.145-0.144 0.116-0.212 0.302-0.178 0.483 0.278 1.451 1.207 3.44 4.057 4.679 0.337 0.146 0.86 0.26 1.523 0.403 2.477 0.536 6.622 1.435 7.639 5.232 0.060 0.223 0.262 0.37 0.482 0.37 0.043 0 0.086-0.006 0.13-0.017 0.267-0.072 0.425-0.346 0.354-0.613-1.175-4.387-5.871-5.404-8.393-5.95-0.585-0.127-1.090-0.236-1.336-0.344-1.86-0.808-3.006-2.039-3.411-3.665 1.727-1.483 3.172-3.771 3.998-6.337 0.877-1.14 1.359-2.314 1.359-3.317 0-0.669-0.216-1.227-0.644-1.663-0.238-5.604-4.237-10.017-9.2-10.088l-0.149-0.002c-4.873 0.026-8.889 4.323-9.24 9.83-0.626 0.46-0.944 1.105-0.944 1.924 0 1.183 0.669 2.598 1.84 3.896 0.809 2.223 2.063 4.176 3.556 5.543-0.403 1.632-1.55 2.867-3.414 3.676-0.241 0.105-0.721 0.22-1.277 0.352-2.541 0.604-7.269 1.729-8.453 6.147-0.071 0.267 0.087 0.54 0.354 0.612z"></path>
+</symbol>
+<symbol id="icon-map-pin" viewBox="0 0 24 32">
+<title>map-pin</title>
+<path d="M12 0c-6.617 0-12 5.394-12 12.022 0 9.927 11.201 19.459 11.678 19.86 0.093 0.079 0.208 0.118 0.322 0.118s0.226-0.038 0.318-0.114c0.477-0.394 11.682-9.762 11.682-19.864 0-6.628-5.383-12.022-12-12.022zM12.002 30.838c-1.841-1.645-11.002-10.259-11.002-18.816 0-6.078 4.935-11.022 11-11.022s11 4.944 11 11.022c0 8.702-9.152 17.193-10.998 18.816zM12 6c-3.309 0-6 2.691-6 6s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zM12 17c-2.757 0-5-2.243-5-5s2.243-5 5-5 5 2.243 5 5-2.243 5-5 5z"></path>
+</symbol>
+<symbol id="icon-heart" viewBox="0 0 37 32">
+<title>heart</title>
+<path d="M27 0c-2.476 0-4.856 0.921-6.704 2.595-0.702 0.635-1.303 1.357-1.796 2.154-0.493-0.797-1.094-1.519-1.796-2.155-1.848-1.673-4.228-2.594-6.704-2.594-5.514 0-10 4.486-10 10 0 3.722 1.158 6.66 3.871 9.825 3.942 4.6 13.919 11.62 14.342 11.917 0.086 0.061 0.187 0.091 0.287 0.091s0.201-0.030 0.287-0.091c0.423-0.297 10.4-7.317 14.343-11.917 2.712-3.165 3.87-6.103 3.87-9.825 0-5.514-4.486-10-10-10zM32.371 19.175c-3.495 4.076-12.18 10.341-13.871 11.545-1.691-1.204-10.376-7.469-13.87-11.545-2.545-2.969-3.63-5.713-3.63-9.175 0-4.963 4.038-9 9-9 2.227 0 4.37 0.829 6.032 2.335 0.838 0.76 1.518 1.656 2.020 2.664 0.17 0.34 0.726 0.34 0.896 0 0.502-1.008 1.182-1.904 2.020-2.663 1.662-1.507 3.805-2.336 6.032-2.336 4.962 0 9 4.037 9 9 0 3.462-1.085 6.206-3.629 9.175z"></path>
+</symbol>
+<symbol id="icon-global" viewBox="0 0 32 32">
+<title>global</title>
+<path d="M0.034 16.668c0.354 8.511 7.369 15.332 15.966 15.332s15.612-6.821 15.966-15.332c0.019-0.053 0.034-0.108 0.034-0.168 0-0.036-0.013-0.067-0.020-0.1 0.003-0.134 0.020-0.265 0.020-0.4 0-8.822-7.178-16-16-16s-16 7.178-16 16c0 0.135 0.017 0.266 0.020 0.4-0.007 0.033-0.020 0.064-0.020 0.1 0 0.060 0.015 0.115 0.034 0.168zM24.921 22.742c-1.319-0.552-2.735-0.979-4.215-1.271 0.158-1.453 0.251-2.962 0.28-4.47h4.98c-0.091 2.054-0.456 3.993-1.045 5.741zM26.965 17h3.984c-0.186 2.806-1.138 5.403-2.663 7.579-0.759-0.533-1.577-1.019-2.457-1.44 0.645-1.869 1.042-3.943 1.136-6.139zM12.389 22.286c1.178-0.184 2.387-0.286 3.611-0.286s2.433 0.102 3.61 0.286c-0.694 5.335-2.21 8.714-3.61 8.714s-2.916-3.379-3.611-8.714zM13.908 30.664c-2.751-0.882-5.078-3.471-6.482-6.984 1.246-0.525 2.586-0.935 3.99-1.217 0.459 3.496 1.298 6.542 2.492 8.201zM12.274 10.709c1.217 0.188 2.465 0.291 3.726 0.291s2.509-0.103 3.726-0.291c0.172 1.62 0.274 3.388 0.274 5.291h-8c0-1.903 0.102-3.671 0.274-5.291zM19.985 17c-0.028 1.525-0.118 2.961-0.26 4.291-1.216-0.188-2.463-0.291-3.725-0.291s-2.509 0.103-3.726 0.291c-0.173-1.626-0.237-3.057-0.26-4.291h7.971zM20.585 22.463c1.404 0.282 2.743 0.692 3.99 1.217-1.404 3.513-3.731 6.102-6.482 6.984 1.193-1.659 2.032-4.705 2.492-8.201zM21 16c0-1.836-0.102-3.696-0.294-5.47 1.48-0.292 2.896-0.72 4.215-1.271 0.684 2.029 1.079 4.315 1.079 6.741h-5zM20.585 9.537c-0.46-3.496-1.298-6.543-2.493-8.201 2.751 0.882 5.078 3.471 6.482 6.984-1.246 0.525-2.585 0.936-3.989 1.217zM19.611 9.714c-1.178 0.184-2.387 0.286-3.611 0.286s-2.433-0.102-3.611-0.286c0.695-5.335 2.211-8.714 3.611-8.714s2.916 3.379 3.611 8.714zM11.415 9.537c-1.404-0.282-2.743-0.692-3.99-1.217 1.404-3.513 3.731-6.102 6.482-6.984-1.193 1.659-2.032 4.705-2.492 8.201zM11.294 10.53c-0.192 1.774-0.294 3.634-0.294 5.47h-5c0-2.426 0.395-4.712 1.079-6.742 1.319 0.552 2.735 0.979 4.215 1.272zM11.014 17c0.029 1.508 0.122 3.017 0.28 4.471-1.48 0.292-2.896 0.72-4.215 1.271-0.589-1.748-0.954-3.687-1.045-5.742h4.98zM6.17 23.139c-0.88 0.422-1.697 0.907-2.456 1.44-1.525-2.176-2.477-4.772-2.663-7.579h3.984c0.094 2.196 0.491 4.27 1.135 6.139zM4.313 25.38c0.685-0.479 1.417-0.922 2.207-1.305 1.004 2.485 2.449 4.548 4.186 5.943-2.526-0.958-4.729-2.568-6.393-4.638zM21.294 30.017c1.738-1.394 3.182-3.458 4.186-5.943 0.79 0.384 1.522 0.826 2.207 1.305-1.664 2.071-3.867 3.681-6.393 4.638zM27 16c0-2.567-0.428-4.987-1.17-7.139 0.88-0.422 1.698-0.907 2.457-1.44 1.704 2.434 2.713 5.389 2.713 8.579h-4zM27.688 6.62c-0.685 0.479-1.417 0.921-2.207 1.305-1.004-2.485-2.449-4.549-4.186-5.943 2.525 0.958 4.728 2.568 6.393 4.638zM10.706 1.983c-1.738 1.394-3.182 3.458-4.186 5.943-0.791-0.384-1.522-0.827-2.207-1.306 1.664-2.070 3.867-3.68 6.393-4.637zM3.714 7.421c0.758 0.533 1.576 1.018 2.456 1.44-0.742 2.152-1.17 4.572-1.17 7.139h-4c0-3.19 1.009-6.145 2.714-8.579z"></path>
+</symbol>
+</defs>
+</svg>

src/commons/img/text.txt

@@ -0,0 +1,18 @@
+--- Features
+
+Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tenetur distinctio necessitatibus pariatur voluptatibus.
+
+Voluptatum mollitia quae. Vero ipsum sapiente molestias accusamus rerum sed a eligendi aut quia.
+
+Tenetur distinctio necessitatibus pariatur voluptatibus quidem consequatur harum.
+
+Vero ipsum sapiente molestias accusamus rerum. Lorem, ipsum dolor sit amet consectetur adipisicing elit.
+
+Quidem consequatur harum, voluptatum mollitia quae. Tenetur distinctio necessitatibus pariatur voluptatibus.
+
+Pariatur voluptatibus quidem consequatur harum, voluptatum mollitia quae.
+
+
+--- Stories
+
+Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tenetur distinctio necessitatibus pariatur voluptatibus. Quidem consequatur harum volupta!

src/commons/realtors.jsx

@@ -0,0 +1,3 @@
+export default function Realtors() {
+  return <div className="realtors">Top 3 realtors</div>;
+}

src/commons/sidebar.jsx

@@ -0,0 +1,3 @@
+export default function Sidebar() {
+  return <div className="sidebar">Sidebar</div>;
+}

src/commons/stories.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+
+export default function Stories() {
+  return (
+    <React.Fragment>
+      <div className="story__pictures">Story Pictures</div>
+      <div className="story__content">Story Content</div>
+    </React.Fragment>
+  );
+}

src/sass/_base.scss

@@ -33,3 +33,13 @@ body {
   font-weight: 300;
   line-height: 1.6;
 }
+
+.container {
+  display: grid;
+  grid-template-rows: 80vh min-content 40vw repeat(3, min-content);
+  grid-template-columns:
+    [sidebar-start] 8rem [sidebar-end full-start] minmax(6rem, 1fr)
+    [center-start] repeat(8, [col-start] minmax(min-content, 14rem) [col-end])
+    [center-end] minmax(6rem, 1fr)
+    [full-end];
+}

src/sass/_features.scss

@@ -0,0 +1,4 @@
+.features {
+  background-color: $color-grey-dark-2;
+  grid-column: center-start / center-end;
+}

src/sass/_footer.scss

@@ -0,0 +1,4 @@
+.footer {
+  background-color: $color-secondary;
+  grid-column: full-start / full-end;
+}

src/sass/_gallery.scss

@@ -0,0 +1,4 @@
+.gallery {
+  background-color: $color-grey-dark-1;
+  grid-column: full-start / full-end;
+}

src/sass/_header.scss

@@ -0,0 +1,4 @@
+.header {
+  background-color: $color-grey-dark-1;
+  grid-column: full-start / col-end 6;
+}

src/sass/_homes.scss

@@ -0,0 +1,4 @@
+.homes {
+  background-color: $color-secondary;
+  grid-column: center-start / center-end;
+}

src/sass/_realtors.scss

@@ -0,0 +1,4 @@
+.realtors {
+  background-color: $color-secondary;
+  grid-column: col-start 7 / ful-end;
+}

src/sass/_sidebar.scss

@@ -0,0 +1,5 @@
+.sidebar {
+  background-color: $color-primary;
+  grid-column: sidebar-start / sidebar-end;
+  grid-row: 1 / -1;
+}

src/sass/_story.scss

@@ -0,0 +1,11 @@
+.story {
+  &__pictures {
+    background-color: $color-primary;
+    grid-column: full-start / col-end 4;
+  }
+
+  &__content {
+    background-color: $color-grey-light-1;
+    grid-column: col-start 5 / full-end;
+  }
+}