HTML Email TD's stacking - css

Question

I'm trying to create an HTML Email with a table, and from what I've been reading, my TD, TR, and TABLEs need to be display:block in order to work, be responsive etc. However, when I put the cells in the document they stack instead of appearing linearly.
Sorry, it's so long. I've been playing with different solutions to try to get this "responsive" thing to work for this email, but i'm a bit stumped.
/* Basics */
body {
Margin: 0 !important;
padding: 0;
background-color: #ffffff;
}
table {
border-spacing: 0;
}
td {
padding: 0;
}
img {
border: 0;
}
div[style*="margin: 16px 0"] {
Margin:0 !important;
}
.wrapper {
width: 100%;
table-layout: fixed;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
.webkit {
max-width: 600px;
Margin: 0 auto;
}
table[class="magic"],
table[class="magic"] tbody,
table[class="magic"] tr,
table[class="magic"] td {
display: block !important;
width: 100%;
}
/* Y! and Outlook bg image fix */
tr[class=GradeHead] {
width: 100% !important;
height: 198px;
background-image:url('https://gallery.mailchimp.com/88f8ea77021bbc9d2f53d5229/images/5827ac1b-050b-4752-9f9f-728e05e3170b.png');
background-repeat: no-repeat !important;
background-position: 0px 6px !important;
background-size:cover;
}
tr .g-row{
width: 100% !important;
height: auto;
background-repeat: no-repeat !important;
background-size:cover;
background-position: -2px center !important;
display:table-row;
}
tr .g-row-2{
background-image:url('https://gallery.mailchimp.com/88f8ea77021bbc9d2f53d5229/images/535bc2e7-194c-4484-b47e-d8ecd81659a1.png');
}
tr .g-row-3{
background-image:url('https://gallery.mailchimp.com/88f8ea77021bbc9d2f53d5229/images/573b935e-64d4-43d4-b29c-aa3cc0661dbf.png');
}
tr .g-row-4{
background-image:url('https://gallery.mailchimp.com/88f8ea77021bbc9d2f53d5229/images/535bc2e7-194c-4484-b47e-d8ecd81659a1.png');
}
td[class=option] {
width: 300px !important;
height: auto !important;
display: table-cell;
}
td[class=cover] {
background-repeat: no-repeat !important;
background-position: center !important;
width: 100% !important;
height: auto;
}
td .boys {
background-image: url('img/row-1-bubbles.png') !important;
}
td .ship {
background-image: url('img/row-2-ship.png') !important;
}
td .resort {
background-image: url('img/row-3-resort.png') !important;
}
/* iphone X Media call */
#media only screen
and (device-width : 375px)
and (device-height : 812px)
and (-webkit-device-pixel-ratio : 3)
and (device-pixel-ratio : 3) { }
/* iphone 7,8 Media call */
#media only screen
and (device-width : 375px)
and (device-height : 667px)
and (-webkit-device-pixel-ratio : 2)
and (device-pixel-ratio : 2) { }
/* iphone 6 Plus, 6S Plus, 7 Plus, 8 Plus Media call */
#media only screen
and (device-width : 414px)
and (device-height : 736px)
and (-webkit-device-pixel-ratio : 3)
and (device-pixel-ratio : 3) { }
body{
background-color:#fff;
}
*{
font-family:Futura,Helvetica,Arial,sans-serif;
}
p{
color:#929292;
font-size:18px;
}
.plus{
font-size:2em;
padding:20px 10px;
border-radius:30px;
}
a{
text-decoration:none;
color:inherit;
}
#footer a{
text-decoration:underline;
}
#footer p{
color:#c5b9ac;
font-size:12px;
}
.btn-pink{
color:#fff;
background-color:#fa0375;
display:block;
padding:15px 5px;
border-radius:30px;
font-size:22px;
text-align:center;
}
.btn-white{
color:#fff;
border:2px solid #fff;
font-size:18px;
display:block;
margin:10px 25px;
padding:10px 15px;
text-align:center;
text-transform:uppercase;
border-radius:30px;
}
.btn-purp{
color:#fff;
background-color:#69034c;
display:block;
padding:15px 5px;
border-radius:30px;
font-size:20px;
text-align:center;
margin:25px 70px;
}
h3{
color:#fff;
font-size:21px;
font-weight:normal;
}
table,tr,td{
border:none;
border-collapse:collapse;
padding:0;
border-color:rgba(0,0,0,0);
border-style:none;
overflow:hidden;
}
td h3,td p{
margin:10px;
}
<table style="width:600px;height:1726px;table-layout:fixed;display:block;border:none;clear:both;" class="magic" width="600">
<tr class="GradeHead" style="height:198px;background:url('https://gallery.mailchimp.com/88f8ea77021bbc9d2f53d5229/images/5827ac1b-050b-4752-9f9f-728e05e3170b.png') no-repeat 0px 6px;">
<td colspan="4" style="height:198px; width:600px;">
<h2 style="display:none;">You're always up to speed</h2>
</td>
</tr>
<tr style="" class="g-row g-row-2">
<td class="option" colspan="2" width="300" style="width:300px;text-align:center;" >
<h3>HEADLINE </h3>
<p>COPY</p>
Explore
</td>
<td colspan="2" class="cover boys" width="300" style="width:300px;height:300px;background:url('https://gallery.mailchimp.com/88f8ea77021bbc9d2f53d5229/images/8d7b0292-bd08-4b33-87aa-0f56c86b24e3.png') no-repeat;">
 
</td>
</tr>
<tr style="" class="g-row g-row-3">
<td colspan="2" width="300" class="cover ship" style="width:300px;height:300px;) no-repeat;">
 
</td>
<td class="option" colspan="2" width="300" style="width:300px;text-align:center;">
<h3>HEADLINE </h3>
<p>COPY</p>
Explore
</td>
</tr>
<tr style="" class="g-row g-row-4">
<td class="option" colspan="2" width="300" style="width:300px;text-align:center;">
<h3>HEADLINE </h3>
<p>COPY</p>
Explore
</td>
<td class="cover resort" colspan="2" width="300" style="width:300px;height:300px;background:url('https://gallery.mailchimp.com/88f8ea77021bbc9d2f53d5229/images/ecd8b1b9-fed4-42f8-a262-1f769323d7da.png') no-repeat;">  
</td>
</tr>
<tr style="height:180px;">
<td colspan="4" style="background:url('https://gallery.mailchimp.com/88f8ea77021bbc9d2f53d5229/images/d176648a-185c-415d-986e-545b427b1812.png') no-repeat 0px -1px;">
<h2 style="display:none;">Connect with us: #myvacaya</h2>
</td>
</tr>
<tr>
<td>
<img src="https://gallery.mailchimp.com/88f8ea77021bbc9d2f53d5229/images/43334793-5066-4ead-accb-a1bfcf81e6b1.png" alt="A well dressed man celebrating">
</td> <td>
<img src="https://gallery.mailchimp.com/88f8ea77021bbc9d2f53d5229/images/eaea60f1-f4ba-44f2-9175-789386790126.png" alt="A group of partygoers in the sun" style="margin-bottom: 24px;">
</td>
<td>
<img src="https://gallery.mailchimp.com/88f8ea77021bbc9d2f53d5229/images/08329669-dc4e-423d-8769-acb741cf5824.png" alt="A group of mixed race friends at the beach" style="margin-bottom: 24px;">
</td>
<td>
<img src="https://gallery.mailchimp.com/88f8ea77021bbc9d2f53d5229/images/3dd02748-8597-42df-8bb4-6817f959337c.png" alt="A woman in a sun hat drinking from a straw" style="margin-bottom: 24px;">
</td>
</tr>
<tr>
<td colspan="4">
Qs? WE'VE GOT As
LET'S DO THIS
</td>
</tr>
</table>