• Image + Text are fully responsive on all screensizes
• See the button HTML for comments/instructions on color, style, and text adjustments.

• Fully responsive on all screen sizes
• See the button HTML for comments/instructions on color, style, and text adjustments.

Margin (desktop): max-width: 90%;

Margin (mobile): max-width: 95%;

<div id="textContent">
<p>Artiphon sprang from a simple realization: digital music creation enables anyone to make any sound in the world, but most people don’t realize that yet. </p>
</div>

<style>
#textContent {
max-width: 90%;
margin: auto;
text-align: center;
}

/*----------------------------------------------------------------------- Extra small devices (phones, 600px and down) -------------------------------------------------------------*/
@media only screen and (max-width: 600px) {}

/* -----------------------------------------------------------------Small devices (portrait tablets and large phones, 600px and up)------------------------------------------------ */
@media only screen and (min-width: 600px) {}

#textContent {
margin: auto;
}

/*----------------------------------------------------------------------- Medium devices (landscape tablets, 768px and up) ---------------------------------------------------------*/
@media only screen and (min-width: 768px) {}
}

/*------------------------------------------------------------------------ Large devices (laptops/desktops, 992px and up) ----------------------------------------------------------*/
@media only screen and (min-width: 992px) {
#textContent {
max-width: 95%;
margin: auto;
}

/* ------------------------------------------------------------------Extra large devices (large laptops and desktops, 1200px and up) ------------------------------------------------*/
@media only screen and (min-width: 1200px) {}
}
</style>

• Europa
• 100px
• H3
• All Caps
• Color: #3D3D3D

<div id="tierThreeHeaderContainer">
<h3 id="tierThreeHeader" class="unmarked">DOWNLOADS</h3>
</div>

<style>

#tierThreeHeaderContainer{
display: flex;
justify-content: center;
margin: 0em 0em 0em 0em;
}

#tierThreeHeader {
text-align: center;
font-size: 65px;
transition: 300ms;
}

/*------------------------------------------------------------------------------------ BREAKPOINTS START ---------------------------------------------------------------------------*/

/*----------------------------------------------------------------------- Extra small devices (phones, 600px and down) -------------------------------------------------------------*/
@media only screen and (max-width: 641px) {
.marked {
border: solid blue;
}
}

/* -----------------------------------------------------------------Small devices (portrait tablets and large phones, 600px and up)------------------------------------------------ */
@media only screen and (min-width: 641px) {
.marked {
border: solid red;
}
#tierThreeHeader {
font-size: 80px;
}

#tierThreeHeaderContainer{
margin: 4em 0em 0em 0em;
}

}

/*----------------------------------------------------------------------- Medium devices (landscape tablets, 768px and up) ---------------------------------------------------------*/
@media only screen and (min-width: 768px) {
.marked {
border: solid yellow;
}

#tierThreeHeader {
font-size: 100px;
}

}

/*------------------------------------------------------------------------ Large devices (laptops/desktops, 992px and up) ----------------------------------------------------------*/
@media only screen and (min-width: 992px) {
.marked {
border: solid deeppink;
}

#tierThreeHeaderContainer{
margin: 4em 0em -3em 0em;
}
}

/* ------------------------------------------------------------------Extra large devices (large laptops and desktops, 1200px and up) ------------------------------------------------*/
@media only screen and (min-width: 1200px) {
.marked {
border: solid lime;
}
}

</style>