/* UI KIT Typography */
.h1 {
    font-family: Gilroy-Bold;
    font-style: normal;
    font-weight: 400;
    font-size: 2rem;
    line-height: 150%;
    color: #17181C;
}

.h2 {
    font-family: Gilroy-Medium;
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 36px;
}

.h2-rail {
    font-size: 16.8px;
    line-height: 25.2px;
}

.h2-bold {
    font-family: Gilroy-Bold;
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 36px;
}

.h3 {
    font-family: Gilroy-Bold;
    font-style: normal;
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.75rem;
    letter-spacing: 0.5px;
    color: #333333;
}

.body-xl {
    font-family: Gilroy-Regular;
    font-style: normal;
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.5rem;
}

.body-l {
    font-family: Gilroy-Regular;
    font-style: normal;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.25rem;
}

.body-m {
    font-family: Gilroy-Regular;
    font-style: normal;
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.link-l {
    font-family: Gilroy-Bold;
    font-weight: 500;
    color: #3F51B5;
    padding-left: 0;
    padding-right: 0;
    text-decoration: underline;
    text-transform: uppercase;
    white-space: break-spaces;
    letter-spacing: 1.25px;
    font-size: 1rem;
    line-height: 1.5rem;
}

.link-m {
    font-family: Gilroy-Bold;
    font-weight: 500;
    color: #3F51B5;
    padding-left: 0;
    padding-right: 0;
    text-decoration: underline;
    text-transform: uppercase;
    white-space: break-spaces;
    letter-spacing: 1.25px;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.link-2 {
    font-family: Gilroy-Bold;
    font-weight: 500;
    color: #3F51B5;
    padding-left: 0;
    padding-right: 0;
    text-decoration: underline;
    text-transform: uppercase;
    white-space: break-spaces;
    letter-spacing: 1.25px;
    font-size: 0.75rem;
    line-height: 1rem;
}

/* medium screens */
@media (max-width: 1366px) {
    h1 {
        font-size: 22.4px;
        line-height: 33.6px;
    }

    .h2 {
        font-size: 16.8px;
        line-height: 25.2px;
    }

    .h2-rail {
        font-size: 16.8px;
        line-height: 25.2px;
    }

    .h2-bold {
        font-size: 16.8px;
        line-height: 25.2px;
    }

    .h3 {
        font-size: 12.6px;
        line-height: 18.9px;
    }

    .body-xl {
        font-size: 12.6px;
        line-height: 16.8px;
    }

    .body-l {
        font-size: 11.2px;
        line-height: 14px;
    }

    .body-m {
        font-size: 9.8px;
        line-height: 14px;
    }

    .link-l {
        font-size: 11.2px;
        line-height: 16.8px;
    }

    .link-m {
        font-size: 9.8px;
        line-height: 16.8px;
    }

    .link-s {
        font-size: 8.4px;
        line-height: 16.8px;
    }
}

/* small screens */
@media (-webkit-device-pixel-ratio: 1.75), (max-width: 1080px) {
    h1 {
        font-size: 20px;
        line-height: 30px;
    }

    .h2 {
        font-size: 15px;
        line-height: 22.5px;
    }

    .h2-rail {
        font-size: 15px;
        line-height: 22.5px;
    }

    .h2-bold {
        font-size: 15px;
        line-height: 22.5px;
    }
    
    .h3 {
        font-size: 11.25px;
        line-height: 16.8px;
    }

    .body-xl {
        font-size: 11.25px;
        line-height: 15px;
    }

    .body-l {
        font-size: 10px;
        line-height: 12.5px;
    }

    .body-m {
        font-size: 8.75px;
        line-height: 12.5px;
    }

    .link-l {
        font-size: 10px;
        line-height: 15px;
    }

    .link-m {
        font-size: 8.75px;
        line-height: 15px;
    }

    .link-s {
        font-size: 7.5px;
        line-height: 10px;
    }
}