﻿.tabs {
    display: flex;
    align-items: stretch;
    gap: 0.4rem;
}

    .tabs > div {
        flex: 1;
        background-color: rgba(16,17,20,0.6);
        height: 3rem;
        font-size: 1.4rem;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.2rem;
        cursor: pointer;
        transition: 0.1s;
    }

        .tabs > div:hover, .tabs > .selected {
            background-color: var(--button-blue);
        }

hr {
    width: 100%;
    margin-top: 1rem;
    margin-bottom: 1rem;
    opacity: 0.2;
}

.header-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 97%;
    align-items: center;
    gap: 0.1rem;
}

@media (min-width: 1000px) and (max-width: 1280px) {
    .tabs > div {
        font-size: 1.1rem;
    }

    .header-grid {
        font-size: 0.85rem;
    }
}

@media (min-width: 1500px) and (max-width: 1800px) {
    .tabs > div {
        font-size: 1.2rem;
    }
}

@media (min-width: 1500px) and (max-width: 1730px) {
    .header-grid {
        font-size: 0.85rem;
    }
}