@media all {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    .card-killstats {
        min-width: 1200px;
    }

    .cards-container {
        display: flex;
        list-style: none;
        padding: 0;
        justify-content: center;
        border: none;
    }

    .cards-container .card {
        position: relative;
        display: flex;
        flex-direction: column;
        min-width: 0;
        overflow-wrap: break-word;
        background-clip: border-box;
        border: 1px solid rgb(0 0 0 / 12.5%);
        border-radius: 0.25rem;
    }

    .cards-container .card-header,
    .cards-container .card-footer {
        padding: 0.75rem 1.25rem;
        margin-bottom: 0;
        background-color: rgb(0 0 0 / 3%);
        border-bottom: 1px solid rgb(0 0 0 / 12.5%);
        text-align: center;
    }

    .cards-container .card-footer {
        border-bottom: none;
        border-top: 1px solid rgb(0 0 0 / 12.5%);
    }

    .cards-container .card-header:first-child {
        border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
    }

    .cards-container .card-body {
        flex: 1 1 auto;
        min-height: 1px;
        padding: 1.25rem;
    }

    .cards-container .cards-item {
        display: flex;
        padding: 1rem;
    }

    .card-img {
        opacity: 1.0;
    }

    .card-img-zoom {
        opacity: 1.0;
        cursor: pointer;
        transition: 0.3s;
    }

    .card-img-zoom:hover {
    opacity: 1;
    transform: scale(1.1);
    }

    .hall-character-image {
        display: block;
        inset: 0;
    }

    .ship-logo {
        position: absolute;
        left: .5rem;
        bottom: .5rem;
        width: 48px;
        height: 48px;
        z-index: 2;
    }

    .ship-logo img {
        opacity: 0.5;
        transition: opacity 0.5s ease-in-out;
    }

    .ship-logo:hover {
        opacity: 1;
    }

    .stats-container {
        width: 1400px;
    }
}

@media (width >= 738px) {
    .card-characters .card-item {
        width: calc(100% / 2);
    }
}

@media (width >= 976px) {
    .card-characters .card-item {
        width: calc(100% / 3);
    }
}

@media (width >= 1390px) {
    .card-characters .card-item {
        width: calc(100% / 4);
    }
}

@media (width >= 1700px) {
    .card-characters .card-item {
        width: calc(100% / 5);
    }
}

@media (width >= 2000px) {
    .card-characters .card-item {
        width: calc(100% / 6);
    }
}

@media (width >= 2200px) {
    .card-characters .card-item {
        width: calc(100% / 7);
    }
}

@media (width >= 2400px) {
    .card-characters .card-item {
        width: calc(100% / 8);
    }
}
