:root {
    --TRUE: initial;
    --FALSE: ;

    --content-width: var(--lg, 1320rem) var(--md, 964rem) var(--sm, 290rem);
    --container-offset: 60rem;
    --container-width: calc(var(--content-width) + (var(--container-offset) * 2));
    --container: max(var(--container-offset), calc((100% - var(--content-width)) / 2));

    --lg: var(--TRUE);
    --md: var(--FALSE);
    --sm: var(--FALSE);

    --border-radius-40-20: var(--lg, 40rem) var(--md, 28rem) var(--sm, 20rem);
    --padding-30-15: var(--lg, 30rem) var(--md, 20rem) var(--sm, 15rem);

    --color-primary: #1d1d1d;
    --color-secondary: #443e37;
    --color-accent: #EF5121;
    --color-light-gray: #D8D8D8;
    --color-white-aluminum: #A7A6A6;
    --color-smoky-white: #F5F5F5;
    --color-black: black;
    --color-green: #0CA364;
    --color-error: #FF0000;

    --play-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 17 19'%3E%3Cpath fill='%23fff' d='M16.5 8.63397c.6667.38491.6667 1.34715 0 1.73203L2.25 18.5933c-.66667.3849-1.5-.0963-1.5-.8661V1.27276c0-.7698.83333-1.25093 1.5-.86603L16.5 8.63397Z'/%3E%3C/svg%3E");
    --pause-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 24'%3E%3Cpath fill='%23fff' d='M0 0h6.6087v24H0V0Zm13 0h6.6087v24H13V0Z'/%3E%3C/svg%3E");
}

@media (max-width:1024px) {
    :root {
        --lg: var(--FALSE);
        --md: var(--TRUE);
        --sm: var(--FALSE);

        --container-offset: 30rem;
    }
}

@media (max-width:590px) {
    :root {
        --lg: var(--FALSE);
        --md: var(--FALSE);
        --sm: var(--TRUE);

        --container-offset: 15rem;
    }
}