                :max-device-width max-width-mobile}
 
               [:.navbar__container (:mobile navbar-grid-config)]
-              [:.container (:mobile grid-config)]
+              [:.container common-grid-options]
               ;; should I simply change the layout
               ;; entirely moving with everything on the same column??
               [:.timeline {:grid-column 1


(def ^:private common-grid-options
  {:display "grid"
   :grid-gap "5px"})

(def ^:private grid-config
  {:desktop (merge common-grid-options {:grid-template-columns "550px auto"
                                        :grid-template-rows "auto auto auto auto auto"})

   :mobile (merge common-grid-options {:grid-template-columns "auto"
                                       :grid-template-rows "auto auto auto auto auto auto"})})

(def ^:private navbar-grid-config
  {:desktop {:background-color (:dark-red COLOR-PALLETTE)

   [:app {:background-color (:marsala COLOR-PALLETTE)}]
   ;; maybe the image containing the rest should actually be an element
   ;; by itself?
   [:.countdown__internal {:text-align "center"
                           :width "500px"}]

   ;; countdown settings
   [:.timer {;:background-color (:marsala COLOR-PALLETTE)
