:root {
  --h0-font-size:calc(var(--title-scale) * 90px);
  --h0-line-height:calc(var(--title-scale) * 106.667%);

  --h1-font-size:calc(var(--title-scale) * 60px);
  --h1-line-height:calc(var(--title-scale) * 110%);

  --h2-font-size:calc(var(--title-scale) * 48px);
  --h2-line-height:calc(var(--title-scale) * 112.5%);

  --h3-font-size:calc(var(--title-scale) * 36px);
  --h3-line-height:calc(var(--title-scale) * 116.667%);

  --h4-font-size:calc(var(--title-scale) * 24px);
  --h4-line-height:calc(var(--title-scale) * 125%);

  --h5-font-size:calc(var(--title-scale) * 18px);
  --h5-line-height:calc(var(--title-scale) * 133.333%);

  --text-1-font-size:calc(var(--body-scale) * 20px);
  --text-1-line-height:calc(var(--body-scale) * 130%);

  --text-2-font-size:calc(var(--body-scale) * 18px);
  --text-2-line-height:calc(var(--body-scale) * 133.333%);

  --text-3-font-size:calc(var(--body-scale) * 16px);
  --text-3-line-height:calc(var(--body-scale) * 137.5%);

  --text-4-font-size:calc(var(--body-scale) * 14px);
  --text-4-line-height:calc(var(--body-scale) * 142.857%);

  --text-5-font-size:calc(var(--body-scale) * 12px);
  --text-5-line-height:calc(var(--body-scale) * 150%);

  --text-price-font-size:calc(var(--body-scale) * 18px);
  --text-price-line-height:calc(var(--body-scale) * 133.333%);

  --text-button-font-size:calc(var(--body-scale) * 16px);
  --text-button-line-height:calc(var(--body-scale) * 100%);

  --page-padding:40px;
}

html,
body{
  font-family: var(--body-font);
  font-size:var(--text-3-font-size);
  line-height:var(--text-3-line-height);
}

h1,h2,h3,h4,h5,h6,p{
  margin:0;
  font-weight:400;
}

.font-h0{
  font-size:var(--h0-font-size);
  line-height:var(--h0-line-height);
  font-family: var(--title-font);
}

h1,.font-h1{
  font-size:var(--h1-font-size);
  line-height:var(--h1-line-height);
  font-family: var(--title-font);
}

h2,.font-h2{
  font-size:var(--h2-font-size);
  line-height:var(--h2-line-height);
  font-family: var(--title-font);
}

h3,.font-h3{
  font-size:var(--h3-font-size);
  line-height:var(--h3-line-height);
  font-family: var(--title-font);
}

h4,.font-h4{
  font-size:var(--h4-font-size);
  line-height:var(--h4-line-height);
  font-family: var(--title-font);
}

h5,.font-h5{
  font-size:var(--h5-font-size);
  line-height:var(--h5-line-height);
  font-family: var(--title-font);
}

.font-text-1{
  font-size:var(--text-1-font-size);
  line-height:var(--text-1-line-height);
  font-family: var(--body-font);
}

.font-text-2{
  font-size:var(--text-2-font-size);
  line-height:var(--text-2-line-height);
  font-family: var(--body-font);
}

.font-text-3{
  font-size:var(--text-3-font-size);
  line-height:var(--text-3-line-height);
  font-family: var(--body-font);
}

.font-text-4{
  font-size:var(--text-4-font-size);
  line-height:var(--text-4-line-height);
  font-family: var(--body-font);
}

.font-text-5{
  font-size:var(--text-5-font-size);
  line-height:var(--text-5-line-height);
  font-family: var(--body-font);
}

.font-price{
  font-size:var(--text-price-font-size);
  line-height:var(--text-price-line-height);
  font-family: var(--body-font);
  font-weight: 600;
}

button,
.button{
  font-family: var(--button-font);
  font-size:var(--text-button-font-size);
  line-height:var(--text-button-line-height);
  text-transform: var(--button-transform);
  font-weight: 500;
}

.v-button{
  font-family: var(--button-font);
  font-size:var(--text-button-font-size);
  line-height:var(--text-button-line-height);
  text-transform: var(--button-transform);
  font-weight: 500;
  padding:16px 30px;
}

.font-button{
  font-family: var(--button-font);
  font-size:var(--text-button-font-size);
  line-height:var(--text-button-line-height);
  text-transform: var(--button-transform);
  font-weight: 500;
}

.empty-image-class{
  background-color: rgba(var(--color-text), 0.05);
  width:100%;
  height:100%;
}

section{
  background-color: rgba(var(--color-background));
}

img{
  width: 100%;
  height: 100%;
  object-fit:cover;
}

.fit-contain{
  object-fit:contain;
}
.fit-fill{
  object-fit: fill;
}
.min-w-full {
  min-width: 100%;
}

.max-w-full {
  max-width: 100%;
}

.max-w-2xs {
  max-width: 365px;
}

.max-w-xs {
  max-width: 530px;
}

.max-w-sm {
  max-width: 672px;
}

.max-w-md {
  max-width: 864px;
}

.max-w-lg {
  max-width: 1024px;
}

.max-w-xl {
  max-width: 1216px;
}

.max-w-2xl {
  max-width: 1376px;
}

.font-weight-700{
  font-weight: 700;
}
.font-weight-600{
  font-weight: 600;
}
.font-weight-500{
  font-weight: 500;
}
.font-weight-400{
  font-weight: 400;
}
.font-weight-300{
  font-weight: 300;
}

.opacity-10{
  opacity: 1;
}
.opacity-9{
  opacity: 0.9;
}
.opacity-8{
  opacity: 0.8;
}
.opacity-7{
  opacity: 0.7;
}
.opacity-6{
  opacity: 0.6;
}
.opacity-5{
  opacity: 0.5;
}
.opacity-4{
  opacity: 0.5;
}
.opacity-3{
  opacity: 0.3;
}
.opacity-2{
  opacity: 0.2;
}
.opacity-1{
  opacity: 0.1;
}

.page-padding{
    padding-inline: var(--page-padding);
}

.page-width{
    width: 100%;
    max-width: var(--page-width);
    margin: auto;
}
@media(min-width:1440px){
  :root {
    --h0-font-size:calc(var(--title-scale) * 90px);
    --h1-font-size:calc(var(--title-scale) * 60px);
    --h2-font-size:calc(var(--title-scale) * 48px);
    --h3-font-size:calc(var(--title-scale) * 36px);
    --h4-font-size:calc(var(--title-scale) * 24px);
    --h5-font-size:calc(var(--title-scale) * 18px);

    --text-1-font-size:calc(var(--body-scale) * 20px);
    --text-2-font-size:calc(var(--body-scale) * 18px);
    --text-3-font-size:calc(var(--body-scale) * 16px);
    --text-4-font-size:calc(var(--body-scale) * 14px);
    --text-5-font-size:calc(var(--body-scale) * 12px);

    --text-price-font-size:calc(var(--body-scale) * 18px);
    --text-button-font-size:calc(var(--body-scale) * 16px);
  }
}

@media (max-width: 1024px) {
  :root {
    --h0-font-size:calc(var(--title-scale) * 80px);
    --h1-font-size:calc(var(--title-scale) * 58px);
    --h2-font-size:calc(var(--title-scale) * 48px);
    --h3-font-size:calc(var(--title-scale) * 38px);
    --h4-font-size:calc(var(--title-scale) * 26px);
    --h5-font-size:calc(var(--title-scale) * 20px);

    --text-1-font-size:calc(var(--body-scale) * 22px);
    --text-2-font-size:calc(var(--body-scale) * 20px);
    --text-3-font-size:calc(var(--body-scale) * 18px);
    --text-4-font-size:calc(var(--body-scale) * 16px);
    --text-5-font-size:calc(var(--body-scale) * 14px);
    --text-price-font-size:calc(var(--body-scale) * 20px);
    --text-button-font-size:calc(var(--body-scale) * 18px);

    --page-padding:35px;
  }
}


@media (max-width: 768px) {
    :root {
        --h0-font-size:calc(var(--title-scale) * 10.6667vw);
        --h1-font-size:calc(var(--title-scale) * 8vw);
        --h2-font-size:calc(var(--title-scale) * 7.2vw);
        --h3-font-size:calc(var(--title-scale) * 5.8667vw);
        --h4-font-size:calc(var(--title-scale) * 4.2667vw);
        --h5-font-size:calc(var(--title-scale) * 3.2vw);

        --text-1-font-size:calc(var(--body-scale) * 4vw);
        --text-2-font-size:calc(var(--body-scale) * 3.7333vw);
        --text-3-font-size:calc(var(--body-scale) * 3.4667vw);
        --text-4-font-size:calc(var(--body-scale) * 3.2vw);
        --text-5-font-size:calc(var(--body-scale) * 2.9333vw);
        --text-price-font-size:calc(var(--body-scale) * 3.7333vw);
        --text-button-font-size:calc(var(--body-scale) * 3.4667vw);

        --page-padding:20px;
    }

    .v-button{
        padding:2.1333vw 4vw;
    }
    .mobile-text-left{
        text-align: left;
    }
    .mobile-text-center{
        text-align: center;
    }
    .mobile-text-right{
        text-align: right;
    }
}