.servers-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.servers-header {
    min-height: 90px;

    padding:
        20px
        clamp(22px, 5vw, 80px);

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom:
        1px solid var(--border);

    background:
        rgba(7, 7, 9, 0.9);
}

.servers-brand {
    display: flex;
    align-items: end;
    gap: 3px;
}

.servers-brand-main {
    font-size: 29px;
    font-weight: 950;
    letter-spacing: -0.055em;
}

.servers-brand-dot {
    color: var(--red-bright);
    font-size: 20px;
    font-weight: 950;
}

.servers-back {
    min-height: 38px;

    padding:
        0
        14px;

    display: flex;
    align-items: center;
    gap: 9px;

    border:
        1px solid var(--border);

    border-radius: 4px;

    color: #9999a1;

    font-size: 8px;
    font-weight: 900;
}

.servers-back span {
    color: var(--red-bright);
}

.servers-main {
    width: 100%;
    max-width: 1450px;

    margin: 0 auto;

    padding:
        36px
        clamp(22px, 5vw, 80px)
        70px;

    flex: 1;
}

.breadcrumb {
    margin-bottom: 30px;

    display: flex;
    gap: 9px;

    color: #66666e;

    font-size: 8px;
    font-weight: 800;
}

.breadcrumb span:last-child {
    color: #9999a0;
}

.servers-title {
    margin-bottom: 25px;
}

.servers-kicker {
    color: var(--red-bright);

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 0.22em;
}

.servers-title h1 {
    margin:
        4px
        0
        6px;

    font-size:
        clamp(32px, 4vw, 50px);

    font-weight: 950;

    letter-spacing: -0.045em;
}

.servers-title p {
    margin: 0;

    color: #7d7d85;

    font-size: 11px;
}

.servers-summary {
    width: max-content;

    margin-bottom: 28px;

    padding:
        13px
        18px;

    display: flex;
    align-items: center;
    gap: 24px;

    border:
        1px solid var(--border);

    border-radius: 5px;

    background:
        rgba(15, 15, 18, 0.78);
}

.summary-item {
    min-width: 100px;

    display: flex;
    flex-direction: column;
}

.summary-value {
    color: var(--red-bright);

    font-size: 22px;
    font-weight: 900;
}

.summary-label {
    margin-top: 3px;

    color: #6f6f77;

    font-size: 7px;
    font-weight: 900;

    letter-spacing: 0.12em;
}

.summary-divider {
    width: 1px;
    height: 35px;

    background: var(--border);
}

.server-list {
    display: flex;
    flex-direction: column;

    gap: 17px;
}

.server-list-card {
    position: relative;

    min-height: 180px;

    overflow: hidden;

    border:
        1px solid var(--border);

    border-radius: 7px;

    background:
        #0d0d10;

    isolation: isolate;

    transition:
        transform 180ms ease,
        border-color 180ms ease;
}

.server-list-card:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(227, 38, 46, 0.4);
}

.server-list-art {
    position: absolute;
    inset: 0;

    z-index: -3;

    background-size: cover;
    background-position: center;

    filter:
        saturate(0.78)
        brightness(0.55);

    transition:
        filter 300ms ease,
        transform 500ms ease;
}

.server-list-card:hover .server-list-art {
    filter:
        saturate(1.2)
        brightness(1.02);

    transform:
        scale(1.035);
}

.server-list-overlay {
    position: absolute;
    inset: 0;

    z-index: -2;

    background:
        linear-gradient(
            90deg,
            rgba(7,7,9,.98) 0%,
            rgba(7,7,9,.90) 35%,
            rgba(7,7,9,.55) 66%,
            rgba(7,7,9,.2) 100%
        );
}

.server-list-content {
    min-height: 180px;

    padding:
        21px
        23px;

    display: grid;

    grid-template-columns:
        minmax(260px, 1.3fr)
        minmax(330px, 1fr)
        auto;

    align-items: center;
    gap: 30px;
}

.server-type {
    display: inline-block;

    margin-bottom: 8px;

    padding:
        4px
        7px;

    border:
        1px solid rgba(255,255,255,.11);

    border-radius: 3px;

    color: #8d8d95;

    font-size: 7px;
    font-weight: 900;
}

.server-list-main h2 {
    margin:
        0
        0
        5px;

    font-size: 23px;
    font-weight: 950;
}

.server-list-main p {
    margin: 0;

    max-width: 430px;

    color: #777780;

    font-size: 10px;
}

.server-list-data {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(85px, 1fr));

    gap: 20px;
}

.server-list-data div {
    display: flex;
    flex-direction: column;
}

.server-list-data span {
    margin-bottom: 4px;

    color: #6f6f77;

    font-size: 7px;
    font-weight: 900;

    letter-spacing: 0.11em;
}

.server-list-data strong {
    font-size: 10px;
}

.server-live-status.online {
    color: var(--green);
}

.server-live-status.offline {
    color: var(--red-bright);
}

.server-live-status.preparing {
    color: var(--orange);
}

.server-live-status.planned {
    color: #85858d;
}

.server-list-button {
    min-width: 135px;
    min-height: 38px;

    padding:
        0
        13px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    border:
        1px solid rgba(227, 38, 46, 0.55);

    border-radius: 4px;

    background:
        rgba(227, 38, 46, 0.12);

    font-size: 8px;
    font-weight: 900;
}

.server-list-button span {
    color: var(--red-bright);
}

.server-list-button.disabled {
    pointer-events: none;

    border-color:
        rgba(255,255,255,.09);

    color: #66666d;

    background:
        rgba(0,0,0,.25);
}

.servers-footer {
    min-height: 80px;

    padding:
        20px
        clamp(22px, 5vw, 80px);

    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    border-top:
        1px solid var(--border);

    color: #6e6e76;

    font-size: 9px;
}

.servers-footer strong {
    color: #a0a0a7;
}

.servers-footer a {
    justify-self: end;
}

@media (max-width: 900px) {

    .server-list-content {
        grid-template-columns:
            1fr;

        gap: 18px;
    }

    .server-list-button {
        width: max-content;
    }

}

@media (max-width: 650px) {

    .servers-header {
        padding:
            15px
            16px;
    }

    .servers-brand-main {
        font-size: 23px;
    }

    .servers-brand-dot {
        font-size: 16px;
    }

    .servers-main {
        padding:
            25px
            13px
            45px;
    }

    .servers-summary {
        width: 100%;

        justify-content: center;
    }

    .server-list-content {
        padding:
            18px;
    }

    .server-list-data {
        grid-template-columns:
            repeat(3, 1fr);

        gap: 10px;
    }

    .server-list-main h2 {
        font-size: 19px;
    }

    .server-list-main p {
        font-size: 9px;
    }

    .servers-footer {
        grid-template-columns: 1fr;

        gap: 9px;

        text-align: center;
    }

    .servers-footer a {
        justify-self: center;
    }

}