/* MATCHUP LAYOUT */
.component-countdown.layout-matchup { --countdown-digit-offset:0.25rem;}
.component-countdown.layout-matchup .grid { display:flex; flex-direction:column; align-items:center; gap:1rem }
.component-countdown.layout-matchup .event-title { font-size:1.5rem; font-weight:700; text-transform:uppercase }
.component-countdown.layout-matchup .logo-col { flex:1; line-height:1; display:flex; flex-direction:column; align-items:center; text-align:center }
.component-countdown.layout-matchup .team-logo { max-width:80px }
.component-countdown.layout-matchup .event-col { width:100%; display:flex; flex-direction:column }
.component-countdown.layout-matchup .event-details { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; line-height:initial; z-index:1;}
.component-countdown.layout-matchup .event-teams { display:flex; align-items:center; justify-content:center; gap:1rem; z-index:0; }
.component-countdown.layout-matchup .event-links { z-index:1; }
.component-countdown.layout-matchup .event-links a { padding:0 }

.component-countdown.layout-matchup .countdown-keys { display:flex; justify-content:center; margin-top:1rem; z-index:1; }
.component-countdown.layout-matchup .countdown { margin:0; line-height:1; text-align:center }
.component-countdown.layout-matchup .countdown > li { border-right:none !important }
.component-countdown.layout-matchup .countdown-label { margin-top:5px; text-transform:uppercase }
.component-countdown.layout-matchup .countdown-days .countdown-label { margin-left:0 }

.component-countdown.layout-matchup .countdown-digit { display:flex; align-items:center; padding:var(--countdown-digit-offset) 0; color:#fff; font-weight:normal; border-top:solid 1px rgba(255,255,255,0.15); border-bottom:solid 1px rgba(255,255,255,0.15); }
.component-countdown.layout-matchup .countdown-digit span { display:block; width:32px; padding:0.5rem 0.25px; font-size:1.75rem; border:1px solid rgba(255,255,255,0.15); background:var(--bs-primary) }
.component-countdown.layout-matchup .countdown-digit span:last-of-type { margin-left:1px }
.component-countdown.layout-matchup li:not(:first-child) .countdown-digit::before { content:":"; margin:0 2px; color:var(--bs-light); font-size:1.4rem }
.component-countdown.layout-matchup li:first-child .countdown-digit { padding-left:var(--countdown-digit-offset); border-left:solid 1px rgba(255,255,255,0.15); }
.component-countdown.layout-matchup li:last-child .countdown-digit { padding-right:var(--countdown-digit-offset); border-right:solid 1px rgba(255,255,255,0.15); }

@media (min-width:550px) {
    .component-countdown.layout-matchup .logo-col { flex-direction:row; gap:1rem; }
    .component-countdown.layout-matchup .team-2.logo-col { justify-content:flex-end }
    .component-countdown.layout-matchup .team-2.logo-col .team-logo { order:2 }
    .component-countdown.layout-matchup .team-logo { max-width:80px;  }
    .component-countdown.layout-matchup .team-logo img { max-height:65px; }
}

@media (min-width:768px) {
    .component-countdown.layout-matchup { --countdown-digit-offset:0.25rem }
    .component-countdown.layout-matchup .grid { position:relative; max-width:1000px; margin:0 auto }
    .component-countdown.layout-matchup .countdown-keys { margin:0 }
    .component-countdown.layout-matchup .countdown-digit span {  }
    .component-countdown.layout-matchup .countdown-digit span:last-of-type {  }
    .component-countdown.layout-matchup li:not(:first-child) .countdown-digit::before { margin:0 3px }
    .component-countdown.layout-matchup .event-col { gap:1rem; }
    .component-countdown.layout-matchup .event-teams { position:absolute; left:0; right:0; top:0; bottom:0; display:flex; justify-content:space-between; align-items:center }
    .component-countdown.layout-matchup .event-teams .vs-at { display:none }
    .component-countdown.layout-matchup .logo-col { flex:0 0  auto; flex-direction:column; }
    .component-countdown.layout-matchup .team-logo { max-width:90px }
    .component-countdown.layout-matchup .team-logo img { max-height:100px; }
    .component-countdown.layout-matchup .logo-col.team-2 .team-logo { order:1 }
    .component-countdown.layout-matchup .logo-col.team-2 .team-name { order:2 }
}

/*FLEX LAYOUT*/
@media (min-width:992px) {
    .component-countdown.layout-matchup .logo-col .team-name {  }
    .component-countdown.layout-matchup .team-logo { max-width:120px }
    .component-countdown.layout-matchup .team-logo img { max-height:110px; }
    .component-countdown.layout-flex .event-teams-logo-col,
    .component-countdown.layout-flex .event-teams-logo-col span.vs-at-indicator { --bs-bg-opacity: 1; background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)); }
    .component-countdown.layout-flex .event-teams-logo-col span.vs-at-indicator { padding: 1rem; z-index: 5; position: relative }
    .component-countdown.layout-flex .event-teams-logo-col .vs-at:after { content: ''; position: absolute; border: 1px solid var(--bs-secondary); height: 100%; top: 0; left: 50% }
}

@media (min-width:1200px) {
    .component-countdown.layout-matchup .team-logo { max-width:180px }
    .component-countdown.layout-matchup .team-logo img { max-height:110px; }
}