:root {
    --sc-color-dark: #190000;
    --sc-color-primary: #7ea647;
    --sc-color-primary-hover: #658539;
    --sc-color-secondary: #2482c2;
    --sc-color-secondary-hover: #1d689b;
    --sc-color-light: #ffffff;
    --sc-color-heading: #014760;

    /* scca hero padding and font sizes */
    --sccahero-padding: 20px;
    --sccahero-title-font-size: 48px;
    --sccahero-subtitle-font-size: 24px;

}

@media only screen and (max-width: 616px) {
    :root {
        --sccahero-title-font-size: 18px;
    }
}


.sccahero__container {
    aspect-ratio: 16 / 9;
    display: grid;
    place-content: center;
}

.sccahero__content {
    background-color: var(--sc-color-dark);
    aspect-ratio: 16 / 9;
    backdrop-filter: brightness(30%);
    padding: var(--sccahero-padding);
    text-align: center;
}

.sccahero__title {
    color: var(--sc-color-light);
    font-size: var(--sccahero-title-font-size);
}

.sccahero__subtitle {
    color: var(--sc-color-light);
    font-size: var(--sccahero-subtitle-font-size);
}

.sccahero__button {
    background-color: var(--sc-color-primary);
    color: var(--sc-color-light);
}

.sccahero__button:hover {
    background-color: var(--sc-color-primary-hover);
}

.sccahero__divider {
    border-color: var(--sc-color-light);
}