alexmwalker

body:after {
 background-image: url(https://media.surlyhorns.com/monthly_2022_12/wtf.gif.d8cf3e0f68b9d513a555d7f60951434e.gif);
 background-size: cover;
 display: block;
 position: absolute;
 content: "";
 width: 194px;
 height: 194px;
 right: 10vw;
 bottom: 0;

alexmwalker

@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
:root {
  --base-line-height: 24px;
  --base-line-ratio: 0.64;
  --base-font-size: calc(var(--base-line-height) * var(--base-line-ratio));
  --typescale: 1.14;
  --typescale-lg: 1.25;
  --title-size: clamp(30px, 7vw, 60px);
  --stat-font-size: clamp(5rem, 30cqi, 8rem);
  --sjs-red: #ee3540;

alexmwalker

alexmwalker

@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
:root {
  --base-line-height: 24px;
  --base-line-ratio: 18/28;
  --base-font-size: calc(var(--base-line-height) * var(--base-line-ratio));
  --typescale: 1.25;
  --title-size: clamp(30px, 7vw, 60px);
  --sjs-red: #ee3540;
  --stat-font-size: clamp(5rem, 30cqi, 8rem);
  --font-TT-bold: "TT Commons Bold", Roboto, Helvetica, Arial, sans-serif;

alexmwalker

alexmwalker

alexmwalker

alexmwalker

.image-mock{
  display: block; 
  margin: 2rem auto; 
  width: 100%; 
  max-width: 1500px; 
  outline: 2px dashed orange;
  position: relative;
}
.image-mock:after{
  position: absolute;

alexmwalker

.middle {
  --tsa-red-wcag: #e12d3c;
  --tsa-red: var(--tsa-red-wcag);
  --tsa-navy: #003450;
  --soft-red: #dd4847;
  --bright-red: #FF1232;
  --main-font-size: 170px;
  --feature-font-size: 4vw;
  --secondary-font-size: 6vw;
  --br: 3px;

alexmwalker