:root {
    --color-primary-foreground--light: #212529;
    --color-primary-foreground--dark: #212529;
    --color-primary-background--light: #f8f9fa;
    --color-primary-background--dark: #f8f9fa;
    --center-vmargin: 1.2rem;
    --gap: 1rem;
}

:root > * {
    --md-primary-fg-color: var(--color-primary-foreground--light);
    --md-primary-bg-color: var(--color-primary-background--light);
}

.hcenter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: var(--center-vmargin) 0;
}

.component-image {
    max-width: 100%;
    width: 350px;
}

.gadget-image {
    max-width: 100%;
    width: 400px;
}

.wiring-diagram-image {
    max-width: 100%;
    width: 850px;
}

.flowchart-image {
    max-width: 100%;
    width: 1000px;
}

.mechanical-image {
    max-width: 100%;
    width: 600px;
}

.mechanical-images-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--gap);
}

.vehicle-views-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--gap);
}

.vehicle-view-image {
    max-width: 100%;
    width: 600px;
}

.image-comparison-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--gap);
    flex-direction: row;
}

.image-horizontal-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--gap);
    flex-direction: row;
}

.object-detection-image {
    max-width: 100%;
    width: 750px;
}

.app--image {
    max-width: 100%;
    width: 700px;
}

.logo--3rd-party {
    max-width: 100%;
    width: 200px;
}

.logo--sponsor {
    max-width: 100%;
    width: 500px;
}

.logo--team {
    max-width: 100%;
    width: 300px;
}

.logo--education {
    max-width: 100%;
    width: 200px;
}

.picture--team {
    max-width: 100%;
    width: 500px;
}