subscription variant

by Richard Hunter

HTML

<div class="container">
  <h1>This is the main heading text</h1>
  <h2>Sub heading desktop</h2>

  <a class="subscribe-button" href="http://www.independent.co.uk/subscribe?regSourceMethod=Premium%20Article%20Prompt&itm_channel=piano&itm_campaign=sticky&itm_audience=prospecting&itm_content=[%% url_b_2 %%]" external-event="join-to-read-click-try-free" target="_parent">
    subscribe now
  </a>

  <div class="login-section">
    Already have an account?
    <button on="tap:sidebar.open" class="login-button" type="button" external-event="openLogin">Log in</button>
  </div>

  <img class="image" src="https://static.independent.co.uk/static-assets/images/Subs-Prompts-Pack-shot.png" />
  <img src="https://static.independent.co.uk/static-assets/images/Teal+Full-colour.png" class="logo" />
</div>

CSS

@font-face {
  font-family: "Independent Serif";
  src: url("https://assets.independent.co.uk/fonts/Independent-Serif-Bold.woff2") format("woff2"),
    url("https://assets.independent.co.uk/fonts/Independent-Serif-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Independent Sans Regular";
  src: url("https://assets.independent.co.uk/fonts/Independent-Sans-Regular.woff2") format("woff2"),
    url("https://assets.independent.co.uk/fonts/Independent-Sans-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Independent Sans Medium";
  src: url("https://assets.independent.co.uk/fonts/Independent-Sans-Medium.woff2") format("woff2"),
    url("https://assets.independent.co.uk/fonts/Independent-Sans-Medium.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Independent Sans Light";
  src: url("https://assets.independent.co.uk/fonts/Independent-Sans-Light.woff2") format("woff2"),
    url("https://assets.independent.co.uk/fonts/Independent-Sans-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  box-sizing: border-box;
}

/* common styles */
.container {
  --grey-green: #337E81;
  padding: 10px;
  border: solid 2px var(--grey-green);
}

h1 {
  grid-area: header;
  font-family: "Independent Serif";
  margin: 0;
}

h2 {
  margin: 0;
  grid-area: subheader;
  font-family: "Independent Sans Regular";
}

.image {
  grid-area: image;
}

.subscribe-button {
  grid-area: subscribe;
  letter-spacing: 1;
  display: inline-block;
  text-transform: uppercase;
  text-align: center;
  border: 0;
  background-color: var(--grey-green);
  color: white;
  border-radius: 6px;
  padding: 12px 0px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  line-height: 20px;
  font-family: "Independent Sans Medium";
  height: 44px;
}

.login-section {
  grid-area:...