:root {
    --color-black: #000000;
    --color-white: #ffffff;
    --color-grey: #909090;
    --color-grey-2: #e6e6e6;
    --color-grey-3: #cecece;
    --color-primary: #020617;
    --color-secundary: #1e293b;
    --color-terciary: #475569;
    --color-base: #94a3b8;
    --color-background: #cbd5e1;
    --color-background-2: #e2e8f0;
    --color-background-light: #f8fafc;

    --color-pink: #ff71eb;
    --color-yellow: #ffd302;
    --color-orange: #ff5c21;
    --color-violet: #a057ff;
    --color-green: #009851;
    --color-blue: #3942ff;
    --color-nature-brick: #b2381c;
    --color-nature-timber: #c89f5e;
    --color-nature-bamboo: #5c7f67;
    --color-nature-limestone: #cbc1b2;
    --color-nature-slate: #53565e;
    --color-nature-clay: #db7347;

    --page-width: 1512;

    --border-radius: calc(100vw * 5 / var(--page-width));

    /* 24px */
    --padding-general: calc(100vw * 24 / var(--page-width));

    /* DEFAULT SIZE 16 */
    --font-size-base: calc(100vw * 16 / var(--page-width));

    /* DEFAULT SIZE 16/19.2 */
    --font-size-body: 1rem;
    --line-height-body: 1.2rem;

    /* 38/45.6 - T0 */
    --font-size-t0: 2.375rem;
    --line-height-t0: 2.85rem;

    /* 21/25.2 - T1 */
    --font-size-t1: 1.3225rem;
    --line-height-t1: 1.575rem;

    /* 12/14.4 - M1 */
    --font-size-m1: 0.75rem;
    --line-height-m1: 0.9rem;

    /* 38/41.8 - H3 */
    --font-size-h3: 2.375rem;
    --line-height-h3: 2.6125rem;
    --letter-spacing-h3: -0.01em;

    /* 50/52.5 - H2 */
    --font-size-h2: 3.125rem;
    --line-height-h2: 3.28125rem;
    --letter-spacing-h2: -0.02em;

    /* 68/71.4 - H1 */
    --font-size-h1: 4.25rem;
    --line-height-h1: 4.4625rem;
    --letter-spacing-h1: -0.02em;

    /* 120/130.8 - H0 */
    --font-size-h0: 6.875rem;
    --line-height-h0: 7.218rem;
    --letter-spacing-h0: -0.05em;

    --plyr-color-main: var(--color-accent);
    --plyr-video-controls-background: transparent;
    --plyr-range-thumb-shadow: none;
    --plyr-range-thumb-height: 10px;
    --plyr-range-thumb-active-shadow-width: 0;
    --plyr-range-track-height: 2px;
    --plyr-tooltip-color: var(--color-accent);
    --plyr-tooltip-shadow: none;
    --plyr-tooltip-radius: 0;
    --plyr-font-family: 'Helvetica Neue', Helvetica, Arial;
    --plyr-font-size-base: 11px;
    --plyr-font-size-small: 11px;
    --plyr-font-size-large: 11px;
    --plyr-font-size-xlarge: 11px;
}

@media screen and (max-width: 1680px) {
    :root {
    }
}

@media screen and (max-width: 1280px) {
    :root {
    }
}

@media screen and (max-width: 1100px) {
    :root {
    }
}

@media screen and (max-width: 960px) {
    :root {
    }
}

@media screen and (max-width: 740px) {
    :root {
        --page-width: 390;

        --padding-general: calc(100vw * 12 / var(--page-width));

        /* 30/33 - H2 */
        --font-size-h2: 1.875rem;
        --line-height-h2: 2.0625rem;
        --letter-spacing-h2: -0.01em;

        /* 40/44 - H1 */
        --font-size-h1: 2.5rem;
        --line-height-h1: 2.75rem;
        --letter-spacing-h1: -0.03em;

        /* 54/56.7 - H0 */
        --font-size-h0: 3.375rem;
        --line-height-h0: 3.54375rem;
        --letter-spacing-h0: -0.05em;
    }
}