Rework download section
preview of the scaling ( should be okay all the way down to 270px of screen width or maybe even less ) : https://youtu.be/iO79U48FmSY
For those who will review this code, check for typos
diff --git a/neon.css b/neon.css
index dd19c91..8e89964 100644
--- a/neon.css
+++ b/neon.css
@@ -6595,3 +6595,186 @@
.no-wrap {
white-space: nowrap;
}
+
+.download-section {
+ background: #0080ff;
+ margin: 50px 0;
+ padding: 60px 0;
+}
+
+.download-title {
+ text-align: center;
+ padding: 0 20px;
+}
+
+.download-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ grid-template-rows: auto 1fr;
+ grid-gap: 40px;
+ max-width: 1600px;
+ margin: 0 auto;
+ padding: 50px;
+}
+@media (max-width: 1118px) {
+ .download-grid {
+ grid-template-columns: 1fr 1fr;
+ grid-template-rows: auto 1fr auto 1fr;
+ }
+}
+@media (max-width: 872px) {
+ .download-grid {
+ grid-template-columns: 1fr;
+ grid-template-rows: auto auto auto auto auto;
+ padding: 20px;
+ }
+}
+
+.inf-header-common {
+ text-align: center;
+ padding: 0 0 10px 0;
+ border-bottom: 5px solid #fff;
+}
+
+.inf-header-free {
+ grid-column: 1/3;
+ grid-row: 1/2;
+}
+@media (max-width: 872px) {
+ .inf-header-free {
+ grid-column: 1/2;
+ grid-row: 1/2;
+ }
+}
+
+.inf-header-paid {
+ grid-column: 3/4;
+ grid-row: 1/2;
+}
+@media (max-width: 1118px) {
+ .inf-header-paid {
+ grid-column: 1/3;
+ grid-row: 3/4;
+ }
+}
+@media (max-width: 872px) {
+ .inf-header-paid {
+ grid-column: 1/2;
+ grid-row: 4/5;
+ }
+}
+
+.download-card-common {
+ padding: 30px 30px 70px 30px;
+ border-radius: 10px;
+ width: 100%;
+ min-height: 200px;
+ color: #000;
+ position: relative;
+}
+@media (max-width: 330px) {
+ .download-card-common {
+ padding: 30px 30px 140px 30px;
+ }
+}
+
+.download-card-one {
+ grid-column: 1/2;
+ grid-row: 2/3;
+}
+
+.download-card-two {
+ grid-column: 2/3;
+ grid-row: 2/3;
+}
+@media (max-width: 872px) {
+ .download-card-two {
+ grid-column: 1/2;
+ grid-row: 3/4;
+ }
+}
+
+.download-card-three {
+ grid-column: 3/4;
+ grid-row: 2/3;
+}
+@media (max-width: 1118px) {
+ .download-card-three {
+ grid-column: 1/3;
+ grid-row: 4/5;
+ }
+}
+@media (max-width: 872px) {
+ .download-card-three {
+ grid-column: 1/2;
+ grid-row: 5/6;
+ }
+}
+
+.download-card-white {
+ background: #fff;
+}
+
+.download-card-blue {
+ background: #0060aa;
+ border: 1px solid #fff;
+ color: #fff;
+}
+
+.card-header-title {
+ margin: 0;
+}
+
+.card-header-rows {
+ height: 70px;
+}
+@media (max-width: 872px) {
+ .card-header-rows {
+ height: 100px;
+ }
+}
+@media (max-width: 480px) {
+ .card-header-rows {
+ height: 60px;
+ }
+}
+@media (max-width: 350px) {
+ .card-header-rows {
+ height: auto;
+ }
+}
+
+.card-header-column-one {
+ width: 65%;
+ float: left;
+ height: 65px;
+}
+@media (max-width: 350px) {
+ .card-header-column-one {
+ clear: both;
+ float: none;
+ height: auto;
+ margin-bottom: 10px;
+ }
+}
+
+.card-header-column-two {
+ height: 60px;
+}
+
+.card-or-donation {
+ text-align: right;
+ margin: 0;
+ white-space: nowrap;
+}
+@media (max-width: 350px) {
+ .card-or-donation {
+ text-align: left;
+ }
+}
+
+.buttons {
+ position: absolute;
+ bottom: 30px;
+ left: 30px;
+}
\ No newline at end of file