:root {
    --bs-primary: #6f42c1;
    --bs-primary-rgb: 111, 66, 193;

    --font-base: clamp(0.95rem, 1.4dvh, 1.35rem);
    --font-title: clamp(1.8rem, 5.4dvh, 4rem);
    --font-lead: clamp(1rem, 2.8dvh, 2rem);
    --font-card-title: clamp(1rem, 2.2dvh, 1.7rem);
    --font-card-date: clamp(0.9rem, 2.2dvh, 2.25rem);
    --font-card-text: clamp(0.9rem, 1.8dvh, 1.25rem);

    --logo-height: clamp(4rem, 11dvh, 8.5rem);
    --description-height: clamp(5rem, 16.5dvh, 14rem);
    --qr-size: clamp(4.5rem, 11dvh, 8rem);
    --card-max-height: clamp(20rem, 42dvh, 34rem);
}

html,
body {
    height: 100%;
}

body {
    font-size: var(--font-base);
}

@media (min-width: 768px) {
    .event-grid > .event-col:only-child {
        margin-right: auto;
        margin-left: auto;
    }
}

@media (min-width: 1400px) {
    .tv-container {
        max-width: 1720px;
    }
}

.display-3 {
    font-size: var(--font-title);
    line-height: 1.1;
}

.lead {
    font-size: var(--font-lead);
}

.card-title {
    font-size: var(--font-card-title);
}

.card-text,
.event-description {
    font-size: var(--font-card-text);
}

.card-date {
    font-size: var(--font-card-date);
}

.event-card {
    max-height: var(--card-max-height);
}

.event-description {
    height: var(--description-height);
    overflow: hidden;
}

.event-description p {
    margin-bottom: 0;
}

.logo {
    height: var(--logo-height);
    width: auto;
    flex-shrink: 0;
}

.qr-code {
    width: var(--qr-size);
    height: var(--qr-size);
}