From 01476561fd04f13027ce07393ba585242320794e Mon Sep 17 00:00:00 2001
From: Georgi Matev <georgi.matev@gmail.com>
Date: Mon, 19 Sep 2022 22:19:05 -0400
Subject: [PATCH] Fix responsive ordering of key features (#905)

## Description

Fix responsive ordering of key features

## Type of change

<!--- Please check the type of change your PR introduces: --->
- [ ] :sunflower: Feature
- [x] :bug: Bugfix
- [ ] :world_map: Documentation
- [ ] :robot: Test
- [ ] :computer: CI/Deployment
- [ ] :hamster: Trivial/Minor

## Issue(s)

## Test Plan

<!-- How will this be tested prior to merging.-->
- [x] :muscle: Manual
- [ ] :zap: Unit test
- [ ] :green_heart: E2E
---
 website/src/index.html | 100 ++++++++++++++++++++---------------------
 1 file changed, 50 insertions(+), 50 deletions(-)

diff --git a/website/src/index.html b/website/src/index.html
index 4d2eaeba5..c8bd519d0 100644
--- a/website/src/index.html
+++ b/website/src/index.html
@@ -63,8 +63,8 @@
                     <p class="text-slate-400 max-w-xl mx-auto">See why Corso is a perfect fit for your Microsoft 365 backup and recovery needs.</p>
                 </div><!--end grid-->
 
-                <div class="grid md:grid-cols-12 grid-cols-1 gap-[30px] mt-8">
-                    <div class="lg:col-span-4 md:col-span-6 wow animate__animated animate__fadeInUp" data-wow-delay=".1s">
+                <div class="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 grid-flow-row-dense gap-[30px] mt-8">
+                    <div class="col-start-1 wow animate__animated animate__fadeInUp" data-wow-delay=".1s">
                         <div class="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
                             <div class="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3">
                                 <i data-feather="share-2" class="h-5 w-5 rotate-45"></i>
@@ -75,29 +75,7 @@
                         </div>
                     </div>
 
-                    <div class="lg:col-span-4 md:col-span-6 wow animate__animated animate__fadeInUp" data-wow-delay=".3s">
-                        <div class="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
-                            <div class="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3">
-                                <i data-feather="lock" class="h-5 w-5 rotate-45"></i>
-                            </div>
-                            <div class="flex-1">
-                                <h4 class="mb-0 text-lg font-medium">End-to-End Encryption</h4>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="lg:col-span-4 md:col-span-6 wow animate__animated animate__fadeInUp" data-wow-delay=".5s">
-                        <div class="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
-                            <div class="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3">
-                                <i data-feather="code" class="h-5 w-5 rotate-45"></i>
-                            </div>
-                            <div class="flex-1">
-                                <h4 class="mb-0 text-lg font-medium">Open Source</h4>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="lg:col-span-4 md:col-span-6 wow animate__animated animate__fadeInUp" data-wow-delay=".7s">
+                    <div class="col-start-1 wow animate__animated animate__fadeInUp" data-wow-delay=".3s">
                         <div class="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
                             <div class="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3">
                                 <i data-feather="zap" class="h-5 w-5 rotate-45"></i>
@@ -108,29 +86,7 @@
                         </div>
                     </div>
 
-                    <div class="lg:col-span-4 md:col-span-6 wow animate__animated animate__fadeInUp" data-wow-delay=".9s">
-                        <div class="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
-                            <div class="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3">
-                                <i data-feather="copy" class="h-5 w-5 rotate-45"></i>
-                            </div>
-                            <div class="flex-1">
-                                <h4 class="mb-0 text-lg font-medium">Deduplication</h4>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="lg:col-span-4 md:col-span-6 wow animate__animated animate__fadeInUp" data-wow-delay="1.1s">
-                        <div class="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
-                            <div class="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3">
-                                <i data-feather="upload-cloud" class="h-5 w-5 rotate-45"></i>
-                            </div>
-                            <div class="flex-1">
-                                <h4 class="mb-0 text-lg font-medium">Choice of Object Storage</h4>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="lg:col-span-4 md:col-span-6 wow animate__animated animate__fadeInUp" data-wow-delay="1.3s">
+                    <div class="col-start-1 wow animate__animated animate__fadeInUp" data-wow-delay=".5s">
                         <div class="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
                             <div class="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3">
                                 <i data-feather="activity" class="h-5 w-5 rotate-45"></i>
@@ -141,7 +97,29 @@
                         </div>
                     </div>
 
-                    <div class="lg:col-span-4 md:col-span-6 wow animate__animated animate__fadeInUp" data-wow-delay="1.5s">
+                    <div class="lg:col-start-2 md:col-start-1  wow animate__animated animate__fadeInUp" data-wow-delay=".7s">
+                        <div class="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
+                            <div class="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3">
+                                <i data-feather="lock" class="h-5 w-5 rotate-45"></i>
+                            </div>
+                            <div class="flex-1">
+                                <h4 class="mb-0 text-lg font-medium">End-to-End Encryption</h4>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="lg:col-start-2 md:col-start-1 wow animate__animated animate__fadeInUp" data-wow-delay=".9s">
+                        <div class="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
+                            <div class="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3">
+                                <i data-feather="copy" class="h-5 w-5 rotate-45"></i>
+                            </div>
+                            <div class="flex-1">
+                                <h4 class="mb-0 text-lg font-medium">Deduplication</h4>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="lg:col-start-2 md:col-start-2 md:order-last wow animate__animated animate__fadeInUp" data-wow-delay="1.1s">
                         <div class="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
                             <div class="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3">
                                 <i data-feather="minimize-2" class="h-5 w-5 rotate-45"></i>
@@ -152,7 +130,29 @@
                         </div>
                     </div>
 
-                    <div class="lg:col-span-4 md:col-span-6 wow animate__animated animate__fadeInUp" data-wow-delay="1.7s">
+                    <div class="lg:col-start-3 md:col-start-2 wow animate__animated animate__fadeInUp" data-wow-delay="1.3s">
+                        <div class="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
+                            <div class="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3">
+                                <i data-feather="code" class="h-5 w-5 rotate-45"></i>
+                            </div>
+                            <div class="flex-1">
+                                <h4 class="mb-0 text-lg font-medium">Open Source</h4>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="lg:col-start-3 md:col-start-2 wow animate__animated animate__fadeInUp" data-wow-delay="1.5s">
+                        <div class="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
+                            <div class="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3">
+                                <i data-feather="upload-cloud" class="h-5 w-5 rotate-45"></i>
+                            </div>
+                            <div class="flex-1">
+                                <h4 class="mb-0 text-lg font-medium">Choice of Object Storage</h4>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="lg:col-start-3 md:col-start-2 wow animate__animated animate__fadeInUp" data-wow-delay="1.7s">
                         <div class="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
                             <div class="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3">
                                 <i data-feather="check-circle" class="h-5 w-5 rotate-45"></i>