diff --git a/README.md b/README.md
index 1411082..da6d591 100644
--- a/README.md
+++ b/README.md
@@ -32,8 +32,6 @@ window.TS_BANNERS = {
 <body>
   <topsort-banner
     topsort-api-key="<your api key>"
-    width="600"
-    height="400"
     slot-id="<your slot id>"
     ></topsort-banner>
 </body>
@@ -45,8 +43,6 @@ window.TS_BANNERS = {
 | Name            | Type            | Description                          |
 |-----------------|-----------------|--------------------------------------|
 | topsort-api-key | String          | Your Topsort API key                 |
-| width           | Number          | Banner width                         |
-| height          | Number          | Banner height                        |
 | slot-id         | String          | The slot ID for this banner          |
 | category-id     | Optional String | The category ID of the current page  |
 | search-query    | Optional String | The search query of the current page |
@@ -71,6 +67,18 @@ window.TS_BANNERS = {
 | `asset`         | `[{ url: string }]`                         | An array of url linking to the assets of the banner.                         |
 
 
+# Styling
+
+The component will inherit all styles from its parent elements, but you add
+custom styling to the banner itself.
+To add custom styling to the banner, you can use the following CSS variables:
+
+- `--ts-banner-width`: The width of the banner. Defaults to `100%`.
+- `--ts-banner-height`: The height of the banner. Defaults to `100%`.
+- `--ts-banner-padding`: The padding of the banner. Defaults to `0`.
+- `--ts-banner-margin`: The margin of the banner. Defaults to `0`.
+
+
 # Running the example
 
 You can play around with the provided index.html file. To run it, you'll need to
@@ -79,8 +87,8 @@ install the dependencies and start a local server.
 ```bash
 git clone https://github.com/Topsort/banners.js.git
 cd banners.js
-npm install
-npm run dev
+pnpm install
+pnpm run dev
 ```
 
 Remember to also replace the `topsort-api-key` and `slot-id` attributes with your
diff --git a/index.html b/index.html
index 737e856..a34980a 100644
--- a/index.html
+++ b/index.html
@@ -39,9 +39,15 @@
       justify-content: center;
       padding: 20px;
     }
+    topsort-banner {
+      --ts-banner-width: 50%;
+      --ts-banner-height: 50%;
+      --ts-banner-padding: 10px;
+      --ts-banner-margin: 10px;
+    }
   </style>
   <body>
-    <div style="outline 1px solid black">
+    <div style="outline: 2px solid black">
       <topsort-banner
         topsort-api-key="<your-topsort-api-key>"
         slot-id="<your-slot-id>"
diff --git a/src/index.ts b/src/index.ts
index 4f9ef5e..c1e458f 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -87,12 +87,6 @@ export class TopsortBanner extends LitElement {
   @property({ attribute: "topsort-api-key", type: String })
   readonly apiKey?: string;
 
-  @property({ type: Number })
-  readonly width = 0;
-
-  @property({ type: Number })
-  readonly height = 0;
-
   @property({ attribute: "slot-id", type: String })
   readonly slotId?: string;
 
@@ -216,6 +210,18 @@ export class TopsortBanner extends LitElement {
     this.runAuction();
   }
 
+  static styles = css`
+    :host img {
+      width: var(--ts-banner-width, 100%);
+      height: var(--ts-banner-height, 100%);
+    }
+    :host {
+      display: block;
+      padding: var(--ts-banner-padding, 0);
+      margin: var(--ts-banner-margin, 0);
+    }
+  `;
+
   protected render() {
     if (!this.apiKey || !this.slotId) {
       return this.getErrorElement(new TopsortConfigurationError(this.apiKey, this.slotId));
@@ -223,14 +229,8 @@ export class TopsortBanner extends LitElement {
     switch (this.state.status) {
       case "ready": {
         const src = this.state.asset[0].url;
-        const style = css`
-          img {
-            width: ${this.width}px;
-            height: ${this.height}px;
-          }
-        `;
         return html`
-        <div style="${style}" data-ts-clickable data-ts-resolved-bid-id=${this.state.resolvedBidId}>
+        <div data-ts-clickable data-ts-resolved-bid-id=${this.state.resolvedBidId}>
           <a href="${this.state.href}">
             <img src="${src}" alt="Topsort banner"></img>
           </a>
