message: pulled css out and put in a sass file so it could be reused
diff: </script>
  <style lang="scss">
  - .explore {
  - display: flex;
  - align-items: center;
  - background: var(--off-white);
  - border-radius: 4rem;
  - box-shadow: var(--shadow);
  -
  - @media (max-width: 768px) {
  - flex-direction: column;
  - border-radius: 1rem;
  - }
  -
  - &__text {
  - padding: 0 var(--large);
  - flex: 0 0 45%;
  -
  - @media (max-width: 768px) {
  - padding: var(--xx-small);
  - }
  - }
  -
  - &__paragraph {
  - margin-bottom: var(--x-small);
  -
  - @media (max-width: 768px) {
  - font-size: var(--p-large);
  - }
  - }
  -
  - &__illustration {
  - flex: 1;
  - border-radius: inherit;
  -
  - .small {
  - display: none;
  - }
  -
  - img {
  - border-radius: inherit;
  - }
  -
  - @media (max-width: 1020px) {
  - img {
  - display: none;
  - }
  -
  - .small {
  - display: block;
  - padding: var(--small);
  - }
  - }
  -
  - @media (max-width: 768px) {
  - .small {
  - padding: var(--macro) var(--xx-small) var(--x-small);
  - }
  - }
  - }
  - }
  -
  - h1 {
  - margin-bottom: var(--micro);
  - }
  </style>
  <div class="row">
  