:root {
    --modern-gutter-x: 1.25rem;

    --Background: #FAF7F4;
    --Pumpkin: #FF6B17;

    --Neutral-Black: #000;

    --Neutral-300: #DEE2E6;
    --Neutral-500: #ADB5BD;
    --Neutral-600: #868D93;

    --transition-time-ui: 500ms;
}

*,
*:before,
*:after {
    min-width: 0;
    min-height: 0;
}

body.modern-template,
.c-text,
.b-text-logos-form__text .c-text {
    font-family: var(--font-family-roboto);
}

.c-title,
.b-text-logos-form__text .c-title {
    font-family: var(--font-family-lora);

    font-weight: 700;
}

.modern-template .container {
    width: 100%;
    max-width: 100%;

    margin-inline: auto;
    padding-inline: var(--modern-gutter-x);
}

@media (min-width: 576px) {
    .modern-template .container {
        width: 33.75rem;
    }
}

@media (min-width: 768px) {
    .modern-template .container {
        width: 45rem;
    }
}

@media (min-width: 992px) {
    .modern-template .container {
        width: 60rem;
    }
}

@media (min-width: 1200px) {
    .modern-template .container {
        width: 71.25rem;
    }
}

@media (min-width: 1400px) {
    .modern-template .container {
        width: 82.5rem;
    }
}

@media (min-width: 1600px) {
    .modern-template .container {
        width: 93.125rem;
    }
}


/**
 * Embla Carousel
 */
.embla__dots {
    display: flex;
    justify-content: center;
    gap: 0.625rem;
}

.embla__dot {
    appearance: none;
    margin: 0;
    padding: 0;
    border: none;
    text-decoration: none;

    display: inline-block;
    vertical-align: top;

    border-radius: 50%;

    width: 0.6875rem;
    height: 0.6875rem;

    background-color: var(--Neutral-300);

    transition: background-color var(--transition-time-ui) ease-in-out;
}

.embla__dot--selected {
    background-color: var(--Neutral-Black);
}