Responsive email layout - No MediaQuery

Test recipe of responsive email layout without media queries from https://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919

by AntowaKartowa

HTML

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--[if !mso]><!-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!--<![endif]-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <!--[if (gte mso 9)|(IE)]>
    <style type="text/css">
        table {border-collapse: collapse;}
    </style>
    <![endif]-->
</head>
<body>
    <center class="wrapper">
        <div class="webkit">
            <!--[if (gte mso 9)|(IE)]>
            <table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
              <tr>
                <td>
            <![endif]-->
            <table class="outer" align="center">
              <tr>
              
              
              
                <!-- banner -->
                <td class="full-width-image">
                  <img src="http://etag.antowa.com/images/header.jpg" width="600px" alt="" />
                </td>
                <!-- /banner -->
                
              </tr>
              <tr>
              
                <!-- 1 column -->
                
                <td class="one-column">
                  <table width="100%">
                    <tr>
                      <td class="inner contents">
                        <p class="h1">Lorem ipsum dolor sit amet</p>
                        <p>Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat.</p>
                      </td>
                    </tr>
                  </table>
                </td>
                
                <!-- /1 column -->
                
              </tr>
              <tr>
              
                <!-- 2 columns -->
                
                <td...

CSS

/* Basics */
body {
  margin: 0 !important;
  padding: 0;
  background-color: #ffffff;
}
table {
  border-spacing: 0;
  font-family: sans-serif;
  color: #333333;
}
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;
  min-width: 300px;
  width: calc((100% - 620px) * 600);
  margin: 0 auto;
}

.outer {
  Margin: 0 auto;
  width: 100%;
  max-width: 600px;
}

/* ----------------------*/

.full-width-image img {
  width: 100%;
  max-width: 600px;
  height: auto;
}

/* ----------------------*/

.inner {
  padding: 10px;
}
p {
  Margin: 0;
}
a {
  color: #ee6a56;
  text-decoration: underline;
}
.h1 {
  font-size: 21px;
  font-weight: bold;
  Margin-bottom: 18px;
}
.h2 {
  font-size: 18px;
  font-weight: bold;
  Margin-bottom: 12px;
}

/* ----------------------*/



/* One column layout */
.one-column .contents {
  text-align: left;
}
.one-column p {
  font-size: 14px;
  Margin-bottom: 10px;
}



/*Two column layout*/
.two-column {
  text-align: center;
  font-size: 0;
}

.two-column .column {
  width: 100%;
  max-width: 300px;
  display: inline-block;
  vertical-align: top;
}

.contents {
  width: 100%;
}

.two-column .contents {
  font-size: 14px;
  text-align: left;
}
.two-column img {
  width: 100%;
  max-width: 280px;
  height: auto;
}
.two-column .text {
  padding-top: 10px;
}



/*Three column layout*/
.three-column {
  text-align: center;
  font-size: 0;

  padding-top: 10px;
  padding-bottom: 10px;
}
.three-column .column {
  width: 100%;
  width: calc((320px - 100%) * 300);
  max-width: 300px;
  min-width: 200px;
  display: inline-block;
  vertical-align: top;
}
.three-column .contents {
  font-size: 14px;
  text-align: center;
}
.three-column img {
  width: 100%;
  max-width: 300px;
  height: auto;
}
.three-column .text {
  padding-top: 10px;
}


/*Four column...