/* Event Details only: larger portraits and separators at side boundaries. */
.event-bout-list .event-bout-competitor .avatar {
    width: 80px;
    height: 80px;
    flex: 0 0 80px;
    border-radius: 10px;
}

.event-bout-list .has-separated-sides > .event-bout-side {
    position: relative;
    padding-inline: 22px;
}

.event-bout-list .has-separated-sides .event-bout-vs {
    display: grid;
    left: 0;
    top: 50%;
}

.event-bout-list .event-bout-competitors {
    width: 100%;
}

.event-bout-list .event-bout-competitor {
    max-width: 100%;
}

.event-bout-list .has-separated-sides:not(.sides-1):not(.sides-2) .event-bout-competitor {
    flex-direction: column;
    gap: 10px;
}

/* Larger multi-way cards need space for every portrait and name. */
@media (max-width: 1100px) {
    .event-bout-list .has-separated-sides.sides-4,
    .event-bout-list .has-separated-sides.sides-5,
    .event-bout-list .has-separated-sides.sides-6 {
        grid-template-columns: 1fr;
    }

    .event-bout-list .has-separated-sides.sides-4 > .event-bout-side,
    .event-bout-list .has-separated-sides.sides-5 > .event-bout-side,
    .event-bout-list .has-separated-sides.sides-6 > .event-bout-side {
        grid-column: auto;
        border-left: 0;
        border-top: 1px solid var(--line);
        padding-block: 24px;
    }

    .event-bout-list .has-separated-sides.sides-4 .event-bout-vs,
    .event-bout-list .has-separated-sides.sides-5 .event-bout-vs,
    .event-bout-list .has-separated-sides.sides-6 .event-bout-vs {
        top: 0;
        left: 50%;
    }
}

@media (max-width: 760px) {
    .event-bout-list .has-separated-sides.sides-3 {
        grid-template-columns: 1fr;
    }

    .event-bout-list .has-separated-sides.sides-3 > .event-bout-side {
        grid-column: auto;
        border-left: 0;
        border-top: 1px solid var(--line);
        padding-block: 24px;
    }

    .event-bout-list .has-separated-sides.sides-3 .event-bout-vs {
        top: 0;
        left: 50%;
    }
}

@media (max-width: 600px) {
    .event-bout-list .event-bout-competitor .avatar {
        width: 64px;
        height: 64px;
        flex-basis: 64px;
        border-radius: 8px;
    }
}