/* SVWW Framework */

/* Basics */
html {
  font-size: 62.5%;
}

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
  display: flex;
  flex-direction: column;
  background: #000000;
}

html {
  height: -webkit-fill-available;
}

#footer {
  margin-top: auto;
}

p {
  color: #ffffff;
  max-width: 65ch;
}

@media screen and (max-width: 768px) {
  p {
    max-width: 100%;
  }
}

/* Variables */
:root {
  --spacing-section: clamp(5.6rem, calc(5.6rem + ((1vw - 0.32rem) * 1.6667)), 7.2rem);
  --base-font-size: 16px;
  --line-height: 1.2;
  --font-weight: 700;
  --h1-display: clamp(5.5rem, calc(5.5rem + ((1vw - 0.32rem) * 1.5625)), 7rem);
  --h2-display: clamp(4.8rem, calc(4.8rem + ((1vw - 0.32rem) * 0.7292)), 5.5rem);
  --h1: clamp(4rem, calc(4rem + ((1vw - 0.32rem) * 1.0417)), 5rem);
  --h2: clamp(3.2rem, calc(3.2rem + ((1vw - 0.32rem) * 0.8333)), 4rem);
  --h3: clamp(2.6rem, calc(2.6rem + ((1vw - 0.32rem) * 0.625)), 3.2rem);
  --h4: clamp(2rem, calc(2rem + ((1vw - 0.32rem) * 0.625)), 2.6rem);
  --h5: clamp(1.8rem, calc(1.8rem + ((1vw - 0.32rem) * 0.2083)), 2rem);
  --h6: clamp(1.6rem, calc(1.6rem + ((1vw - 0.32rem) * 0.2083)), 1.8rem);
  /* Primärfarben */
  --p1: #A00005;
  --p2: #000000;
  /* Sekundärfarben */
  --s1: #780005;
  --s2: #BEA055;
  /* Tertiärfarben */
  --t1: #222222;
  --t2: #666666;
  --t3: #999999;
  --t4: #CCCCCC;
  /* Font Farbe */
  --f1: #FFFFFF;
  --f2: #BEA055;
}

/* Section */
.section {
  padding-top: var(--spacing-section);
  padding-bottom: var(--spacing-section);
  padding-left: 64px;
  padding-right: 64px;
  width: 100%;
  box-sizing: border-box;
}

.section-pr {
  padding-top: var(--spacing-section);
  padding-bottom: var(--spacing-section);
  padding-left: 64px;
  width: 100%;
  box-sizing: border-box;
}

@media only screen and (min-width: 769px) {
  .section-10 {
    padding-left: 10%;
    padding-right: 10%;
  } 

  .section-10-pr {
    padding-left: 10%;
    padding-right: 10%;
  } 
}

@media only screen and (max-width: 1599px) {
  .section-10 {
    padding-left: 10%;
    padding-right: 10%;
  }

  .section-10-pr {
    padding-left: 10%;
    padding-right: 10%;
  } 
}

@media only screen and (min-width: 1600px) {
  .section-10 {
    padding-left: 20%;
    padding-right: 20%;
  }

  .section-10-pr {
    padding-left: 20%;
    padding-right: 20%;
  } 
}

/* Section Tablet */
@media only screen and (max-width: 768px) {
  .section {
    padding-left: 32px;
    padding-right: 32px;
  }

  .section-pr {
    padding-left: 32px;
  }
}

/* Section Mobile */
@media only screen and (max-width: 576px) {
  .section {
    padding-left: 16px;
    padding-right: 16px;
  }

  .section-pr {
    padding-left: 16px;
  }

  .section-10-pr {
    padding-left: 10%;
    padding-right: 0%;
  } 
}


/* Buttons */
button{
  appearance: none;
  background-color: transparent;
  border: none;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.Button-Trans{
  padding-left: 6.4rem;
  padding-right: 6.4rem;
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
  border: solid #FFFF;
  border-width: 1px; 
  border-color: #FFFF; 
  text-decoration: none;
  color: #FFFF;
  transition: all .5s ease;

  font-family: Akzidenz-Grotesk Std;
  font-size: 18px;
  font-weight: 700;
  line-height: 31px;
  letter-spacing: 0em;
  text-align: center;
  text-transform: uppercase;
}

.Button-Trans:hover{
  background-color: var(--s2);
  border: none;
}

.Button-Black{
  padding-left: 6.4rem;
  padding-right: 6.4rem;
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
  text-decoration: none;
  color: #FFFF;
  transition: all .5s ease;
  background-color: #000000;

  font-family: Akzidenz-Grotesk Std;
  font-size: 18px;
  font-weight: 700;
  line-height: 31px;
  letter-spacing: 0em;
  text-align: center;
  text-transform: uppercase;
}

.Button-Black:hover{
  background-color: var(--s2);
  border: none;
}

.Button-Gold{
  padding-left: 6.4rem;
  padding-right: 6.4rem;
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
  text-decoration: none;
  color: #FFFF;
  transition: all .5s ease;
  background-color: var(--s2);

  font-family: Akzidenz-Grotesk Std;
  font-size: 18px;
  font-weight: 700;
  line-height: 31px;
  letter-spacing: 0em;
  text-align: center;
  text-transform: uppercase;
}

.Button-Gold:hover{
  background-color: #000000;
  border: none;
}

.Button-White{
  padding-left: 6.4rem;
  padding-right: 6.4rem;
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
  border: solid var(--s2);
  border-width: 1px; 
  text-decoration: none;
  color: var(--s2);
  transition: all .5s ease;
  background-color: #FFFF; 

  font-family: Akzidenz-Grotesk Std;
  font-size: 18px;
  font-weight: 700;
  line-height: 31px;
  letter-spacing: 0em;
  text-align: center;
  text-transform: uppercase;
}

.Button-White:hover{
  background-color: var(--s2);
  color: #FFFF;

}


/* Textfarben */
.c-p1 {
  color: var(--p1);
}

.c-p2 {
  color: var(--p2);
}

.c-s1 {
  color: var(--s1);
}

.c-s2 {
  color: var(--s2);
}

.c-t1 {
  color: var(--t1);
}

.c-t2 {
  color: var(--t2);
}

.c-t3 {
  color: var(--t3);
}

.c-t4 {
  color: var(--t4);
}

.hd-main {
  color: var(--f1);
}

.hd-sub {
  color: var(--f2);
}

/* Hintergrundfarben */
.bg-p1 {
  background-color: var(--p1);
}

.bg-p2 {
  background-color: var(--p2);
}

.bg-s1 {
  background-color: var(--s1);
}

.bg-s2 {
  background-color: var(--s2);
}

.bg-t1 {
  background-color: var(--t1);
}

.bg-t2 {
  background-color: var(--t2);
}

.bg-t3 {
  background-color: var(--t3);
}

.bg-t4 {
  background-color: var(--t4);
}

/*opacity*/
.opacity-01{
  opacity: 0.1;
}

.opacity-02{
  opacity: 0.2;
}

.opacity-03{
  opacity: 0.3;
}

.opacity-04{
  opacity: 0.4;
}

.opacity-05{
  opacity: 0.5;
}

.opacity-06{
  opacity: 0.6;
}

.opacity-07{
  opacity: 0.7;
}

.opacity-08{
  opacity: 0.8;
}

.opacity-09{
  opacity: 0.9;
}

.opacity-1{
  opacity: 1;
}

/* Headings */
h1 {
  font-size: 5rem;
  font-size: var(--h1);
  line-height: var(--line-height);
  font-weight: var(--font-weight);
  color: var(--f1);
}

h2 {
  font-size: 4rem;
  font-size: var(--h2);
  line-height: var(--line-height);
  font-weight: var(--font-weight);
  color: var(--f1);
}

h3 {
  font-size: 3.2rem;
  font-size: var(--h3);
  line-height: var(--line-height);
  font-weight: var(--font-weight);
  color: var(--f1);
}

h4 {
  font-size: 2.6rem;
  font-size: var(--h4);
  line-height: var(--line-height);
  font-weight: var(--font-weight);
  color: var(--f1);
}

h5 {
  font-size: 2rem;
  font-size: var(--h5);
  line-height: var(--line-height);
  font-weight: var(--font-weight);
  color: var(--f1);
}

h6 {
  font-size: 1.8rem;
  font-size: var(--h6);
  line-height: var(--line-height);
  font-weight: var(--font-weight);
  color: var(--primary-color);
}

.hs-1-d {
  font-size: 7rem;
  font-size: var(--h1-display);
  line-height: var(--line-height);
  font-weight: var(--font-weight);
  color: var(--f1);
}

.hs-2-d {
  font-size: 5.5rem;
  font-size: var(--h2-display);
  line-height: var(--line-height);
  font-weight: var(--font-weight);
  color: var(--primary-color);
}

.hs-1 {
  font-size: 5rem;
  font-size: var(--h1);
  line-height: var(--line-height);
  font-weight: var(--font-weight);
  color: var(---f1);
}

.hs-2 {
  font-size: 4rem;
  font-size: var(--h2);
  line-height: var(--line-height);
  font-weight: var(--font-weight);
  color: var(--f1);
}

.hs-3 {
  font-size: 3.2rem;
  font-size: var(--h3);
  line-height: var(--line-height);
  font-weight: var(--font-weight);
  color: var(--f1);
}

.hs-4 {
  font-size: 2.6rem;
  font-size: var(--h4);
  line-height: var(--line-height);
  font-weight: var(--font-weight);
  color: var(--f1);
}

.hs-5 {
  font-size: 2rem;
  font-size: var(--h5);
  line-height: var(--line-height);
  font-weight: var(--font-weight);
  color: var(--f1);
}

.hs-6 {
  font-size: 1.8rem;
  font-size: var(--h6);
  line-height: var(--line-height);
  font-weight: var(--font-weight);
  color: var(--f1);
}

/*Basistext*/
.text{
  font-family: Poppins;   
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0em;
  text-align: left;
}

@media only screen and (min-width: 769px) {
  .text-w-60 {
    width: 60%;
  }
}

/* Basis Typografie */
.f-100 {
  font-weight: 100;
}

.f-200 {
  font-weight: 200;
}

.f-300 {
  font-weight: 300;
}

.f-400 {
  font-weight: 400;
}

.f-500 {
  font-weight: 500;
}

.f-600 {
  font-weight: 600;
}

.f-700 {
  font-weight: 700;
}

/* Text-Styling */
.text-uppercase {
  text-transform: uppercase;
}

.text-lowercase {
  text-transform: lowercase;
}

.text-capitalize {
  text-transform: capitalize;
}

.text-nowrap {
  white-space: nowrap;
}

.text-decoration-none {
  text-decoration: none;
}

.text-underline {
  text-decoration: underline;
}

.text-overline {
  text-decoration: overline;
}

.text-line-through {
  text-decoration: line-through;
}

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-bold {
  font-weight: bold;
}

.text-italic {
  font-style: italic;
}

/* Width Classes */
.w-100 {
  width: 100%;
}

.w-90 {
  width: 90%;
}

.w-80 {
  width: 80%;
}

.w-70 {
  width: 70%;
}

.w-60 {
  width: 60%;
}

.w-50 {
  width: 50%;
}

.w-40 {
  width: 40%;
}

.w-30 {
  width: 30%;
}

.w-20 {
  width: 20%;
}

.w-10 {
  width: 10%;
}

/* Width Tablet/Mobile */
@media only screen and (max-width: 768px) {

  /* For tablets and below */
  .w-100-t {
    width: 100%;
  }
}

/* Flexbox-Layout */
.flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.flex-column {
  flex-direction: column;
}

.flex-center {
  justify-content: center;
  align-items: center;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

.flex-justify-start {
  justify-content: flex-start;
}

.flex-justify-end {
  justify-content: flex-end;
}

.flex-justify-between {
  justify-content: space-between;
}

.flex-justify-around {
  justify-content: space-around;
}

.flex-align-start {
  align-items: flex-start;
}

.flex-align-end {
  align-items: flex-end;
}

.flex-align-center {
  align-items: center;
}

.flex-align-baseline {
  align-items: baseline;
}

.flex-align-stretch {
  align-items: stretch;
}

.flex-align-self-start {
  align-self: flex-start;
}

.flex-align-self-end {
  align-self: flex-end;
}

.flex-align-self-center {
  align-self: center;
}

.flex-align-self-baseline {
  align-self: baseline;
}

.flex-align-self-stretch {
  align-self: stretch;
}

.flex-grow {
  flex-grow: 1;
}

.flex-shrink {
  flex-shrink: 1;
}

.flex-no-shrink {
  flex-shrink: 0;
}

.flex-basis-auto {
  flex-basis: auto;
}

.flex-basis-0 {
  flex-basis: 0;
}

.flex-full-center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.flex-w-center{
    display: flex;
    justify-content: center;
    place-items: center;

}

/* Flex Responsive for Tablet/Mobile */
@media screen and (max-width: 768px) {
  .flex.flex-column-t {
    flex-direction: column;
    width: 100%;
  }
}

/* Grid */
.grid {
  display: grid;
  width: 100%;
  grid-gap: 1.6rem;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  box-sizing: border-box;
  /* Desktop: 12 columns */
}

@media only screen and (max-width: 768px) {
  .grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    box-sizing: border-box;
    /* Tablet: 8 columns */
  }
}

@media only screen and (max-width: 576px) {
  .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    box-sizing: border-box;
    padding-left: 3.2rem;
    padding-right: 3.2rem;
    
    /* Mobile: 4 columns */
  }
}


/* Desktop Classes */
.col-1 {
  grid-column: span 1;
}

.col-2 {
  grid-column: span 2;
}

.col-3 {
  grid-column: span 3;
}

.col-4 {
  grid-column: span 4;
}

.col-5 {
  grid-column: span 5;
}

.col-6 {
  grid-column: span 6;
}

.col-7 {
  grid-column: span 7;
}

.col-8 {
  grid-column: span 8;
}

.col-9 {
  grid-column: span 9;
}

.col-10 {
  grid-column: span 10;
}

.col-11 {
  grid-column: span 11;
}

.col-12 {
  grid-column: span 12;
}

/*Zwischenhandler Desktop-Tablet*/
@media only screen and (max-width: 1516px) {
  .col-1-dt {
    grid-column: span 1;
  }

  .col-2-dt {
    grid-column: span 2;
  }

  .col-3-dt {
    grid-column: span 3;
  }

  .col-4-dt {
    grid-column: span 4;
  }

  .col-5-dt {
    grid-column: span 5;
  }

  .col-6-dt {
    grid-column: span 6;
  }

  .col-7-dt {
    grid-column: span 7;
  }

  .col-8-dt {
    grid-column: span 8;
  }

  .col-9-dt {
    grid-column: span 9;
  }

  .col-10-dt {
    grid-column: span 10;
  }

  .col-11-dt {
    grid-column: span 11;
  }

  .col-12-dt {
    grid-column: span 12;
  }
}

/* Tablet Classes */
@media only screen and (max-width: 768px) {
  .col-1-t {
    grid-column: span 1;
  }

  .col-2-t {
    grid-column: span 2;
  }

  .col-3-t {
    grid-column: span 3;
  }

  .col-4-t {
    grid-column: span 4;
  }

  .col-5-t {
    grid-column: span 5;
  }

  .col-6-t {
    grid-column: span 6;
  }

  .col-7-t {
    grid-column: span 7;
  }

  .col-8-t {
    grid-column: span 8;
  }

  .col-9-t {
    grid-column: span 9;
  }

  .col-10-t {
    grid-column: span 10;
  }

  .col-11-t {
    grid-column: span 11;
  }

  .col-12-t {
    grid-column: span 12;
  }
}

/* Mobile Classes */
@media only screen and (max-width: 576px) {
  .col-1-m {
    grid-column: span 1;
  }

  .col-2-m {
    grid-column: span 2;
  }

  .col-3-m {
    grid-column: span 3;
  }

  .col-4-m {
    grid-column: span 4;
  }

  .col-5-m {
    grid-column: span 5;
  }

  .col-6-m {
    grid-column: span 6;
  }

  .col-7-m {
    grid-column: span 7;
  }

  .col-8-m {
    grid-column: span 8;
  }

  .col-9-m {
    grid-column: span 9;
  }

  .col-10-m {
    grid-column: span 10;
  }

  .col-11-m {
    grid-column: span 11;
  }

  .col-12-m {
    grid-column: span 12;
  }
}

.grid-rows-none {
  grid-template-rows: none;
}

.grid-gap-0 {
  grid-gap: 0;
}

.grid-gap-1 {
  grid-gap: 0.25rem;
}

.grid-gap-2 {
  grid-gap: 0.5rem;
}

.grid-gap-3 {
  grid-gap: 0.75rem;
}

.grid-gap-4 {
  grid-gap: 1rem;
}

.grid-gap-5 {
  grid-gap: 1.25rem;
}

.grid-gap-6 {
  grid-gap: 1.5rem;
}

.grid-gap-8 {
  grid-gap: 2rem;
}

.grid-gap-10 {
  grid-gap: 2.5rem;
}

.grid-gap-12 {
  grid-gap: 3rem;
}

.grid-gap-16 {
  grid-gap: 4rem;
}

.grid-gap-20 {
  grid-gap: 5rem;
}

.grid-gap-24 {
  grid-gap: 6rem;
}

.grid-gap-32 {
  grid-gap: 8rem;
}

.grid-gap-40 {
  grid-gap: 10rem;
}

.grid-gap-48 {
  grid-gap: 12rem;
}

.grid-gap-56 {
  grid-gap: 14rem;
}

.grid-gap-64 {
  grid-gap: 16rem;
}

.grid-auto-cols-auto {
  grid-auto-columns: auto;
}

.grid-auto-cols-min {
  grid-auto-columns: minmax(0, 1fr);
}

.grid-auto-cols-max {
  grid-auto-columns: max-content;
}

.grid-auto-rows-auto {
  grid-auto-rows: auto;
}

.grid-auto-rows-min {
  grid-auto-rows: minmax(0, 1fr);
}

.grid-auto-rows-max {
  grid-auto-rows: max-content;
}

.grid-flow-row {
  grid-auto-flow: row;
}

.grid-flow-column {
  grid-auto-flow: column;
}

.grid-flow-row-dense {
  grid-auto-flow: row dense;
}

.grid-flow-column-dense {
  grid-auto-flow: column dense;
}

/* Grid-Element-Platzierung */
.place-items-center {
  place-items: center;
}

.place-items-start {
  place-items: start;
}

.place-items-end {
  place-items: end;
}

.place-items-stretch {
  place-items: stretch;
}

.place-content-center {
  place-content: center;
}

.place-content-start {
  place-content: start;
}

.place-content-end {
  place-content: end;
}

.place-content-between {
  place-content: space-between;
}

.place-content-around {
  place-content: space-around;
}

.place-content-evenly {
  place-content: space-evenly;
}

.place-self-auto {
  place-self: auto;
}

.place-self-center {
  place-self: center;
}

.place-self-start {
  place-self: start;
}

.place-self-end {
  place-self: end;
}

.place-self-stretch {
  place-self: stretch;
}

/* Padding Allgemein */
.pd-8 {
  padding: 0.8rem;
}

.pd-16 {
  padding: 1.6rem;
}

.pd-24 {
  padding: 2.4rem;
}

.pd-32 {
  padding: 3.2rem;
}

.pd-40 {
  padding: 4rem;
}

.pd-56 {
  padding: 5.6rem;
}

.pd-72 {
  padding: 7.2rem;
}

.pd-80 {
  padding: 8rem;
}

.pd-96 {
  padding: 9.6rem;
}

.pd-120 {
  padding: 12rem;
}

/* Padding Top */
.pd-t-8 {
  padding-top: 0.8rem;
}

.pd-t-16 {
  padding-top: 1.6rem;
}

.pd-t-24 {
  padding-top: 2.4rem;
}

.pd-t-32 {
  padding-top: 3.2rem;
}

.pd-t-40 {
  padding-top: 4rem;
}

.pd-t-56 {
  padding-top: 5.6rem;
}

.pd-t-72 {
  padding-top: 7.2rem;
}

.pd-t-80 {
  padding-top: 8rem;
}

.pd-t-96 {
  padding-top: 9.6rem;
}

.pd-t-120 {
  padding-top: 12rem;
}

/* Padding Bottom */
.pd-b-8 {
  padding-bottom: 0.8rem;
}

.pd-b-16 {
  padding-bottom: 1.6rem;
}

.pd-b-24 {
  padding-bottom: 2.4rem;
}

.pd-b-32 {
  padding-bottom: 3.2rem;
}

.pd-b-40 {
  padding-bottom: 4rem;
}

.pd-b-56 {
  padding-bottom: 5.6rem;
}

.pd-b-72 {
  padding-bottom: 7.2rem;
}

.pd-b-80 {
  padding-bottom: 8rem;
}

.pd-b-96 {
  padding-bottom: 9.6rem;
}

.pd-b-120 {
  padding-bottom: 12rem;
}

/* Padding Left */
.pd-l-8 {
  padding-left: 0.8rem;
}

.pd-l-16 {
  padding-left: 1.6rem;
}

.pd-l-24 {
  padding-left: 2.4rem;
}

.pd-l-32 {
  padding-left: 3.2rem;
}

.pd-l-40 {
  padding-left: 4rem;
}

.pd-l-56 {
  padding-left: 5.6rem;
}

.pd-l-72 {
  padding-left: 7.2rem;
}

.pd-l-80 {
  padding-left: 8rem;
}

.pd-l-96 {
  padding-left: 9.6rem;
}

.pd-l-120 {
  padding-left: 12rem;
}

/* Padding Right */
.pd-r-8 {
  padding-right: 0.8rem;
}

.pd-r-16 {
  padding-right: 1.6rem;
}

.pd-r-24 {
  padding-right: 2.4rem;
}

.pd-r-32 {
  padding-right: 3.2rem;
}

.pd-r-40 {
  padding-right: 4rem;
}

.pd-r-56 {
  padding-right: 5.6rem;
}

.pd-r-72 {
  padding-right: 7.2rem;
}

.pd-r-80 {
  padding-right: 8rem;
}

.pd-r-96 {
  padding-right: 9.6rem;
}

.pd-r-120 {
  padding-right: 12rem;
}

/* Margin Allgemein */
.mg-8 {
  margin: 0.8rem;
}

.mg-16 {
  margin: 1.6rem;
}

.mg-24 {
  margin: 2.4rem;
}

.mg-32 {
  margin: 3.2rem;
}

.mg-40 {
  margin: 4rem;
}

.mg-56 {
  margin: 5.6rem;
}

.mg-72 {
  margin: 7.2rem;
}

.mg-80 {
  margin: 8rem;
}

.mg-96 {
  margin: 9.6rem;
}

.mg-120 {
  margin: 12rem;
}

/* Margin Top */
.mg-t-8 {
  margin-top: 0.8rem;
}

.mg-t-16 {
  margin-top: 1.6rem;
}

.mg-t-24 {
  margin-top: 2.4rem;
}

.mg-t-32 {
  margin-top: 3.2rem;
}

.mg-t-40 {
  margin-top: 4rem;
}

.mg-t-56 {
  margin-top: 5.6rem;
}

.mg-t-72 {
  margin-top: 7.2rem;
}

.mg-t-80 {
  margin-top: 8rem;
}

.mg-t-96 {
  margin-top: 9.6rem;
}

.mg-t-120 {
  margin-top: 12rem;
}

/* Margin Bottom */
.mg-b-8 {
  margin-bottom: 0.8rem;
}

.mg-b-16 {
  margin-bottom: 1.6rem;
}

.mg-b-24 {
  margin-bottom: 2.4rem;
}

.mg-b-32 {
  margin-bottom: 3.2rem;
}

.mg-b-40 {
  margin-bottom: 4rem;
}

.mg-b-56 {
  margin-bottom: 5.6rem;
}

.mg-b-72 {
  margin-bottom: 7.2rem;
}

.mg-b-80 {
  margin-bottom: 8rem;
}

.mg-b-96 {
  margin-bottom: 9.6rem;
}

.mg-b-120 {
  margin-bottom: 12rem;
}

/* Margin Left */
.mg-l-8 {
  margin-left: 0.8rem;
}

.mg-l-16 {
  margin-left: 1.6rem;
}

.mg-l-24 {
  margin-left: 2.4rem;
}

.mg-l-32 {
  margin-left: 3.2rem;
}

.mg-l-40 {
  margin-left: 4rem;
}

.mg-l-56 {
  margin-left: 5.6rem;
}

.mg-l-72 {
  margin-left: 7.2rem;
}

.mg-l-80 {
  margin-left: 8rem;
}

.mg-l-96 {
  margin-left: 9.6rem;
}

.mg-l-120 {
  margin-left: 12rem;
}

/* Margin Right */
.mg-r-8 {
  margin-right: 0.8rem;
}

.mg-r-16 {
  margin-right: 1.6rem;
}

.mg-r-24 {
  margin-right: 2.4rem;
}

.mg-r-32 {
  margin-right: 3.2rem;
}

.mg-r-40 {
  margin-right: 4rem;
}

.mg-r-56 {
  margin-right: 5.6rem;
}

.mg-r-72 {
  margin-right: 7.2rem;
}

.mg-r-80 {
  margin-right: 8rem;
}

.mg-r-96 {
  margin-right: 9.6rem;
}

.mg-r-120 {
  margin-right: 12rem;
}