html, body {
    background-color: #00060f;
}

@media (max-width: 1000px) {
    .next-match {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        padding: 10px;
        position: relative;
        border-radius: 5%;
        background: url('../../multimedia/fondo-next-macth.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
        border: 1px solid #353941;
    }

    .next-match h1 {
        font-size: 16px;
    }

    .next-match ul {
        display: flex;
        flex-direction: column;
        margin-top: 10px;
        gap: 5px;
    }

    .next-match ul li {
        display: flex;
        align-items: center;
        font-size: 12px;
    }

    .next-match ul li svg {
        width: 20px;
        height: 20px;
    }

    .container-timer {
        display: flex;
        flex-direction: column;
        padding: 10px;
        align-items: center;
        justify-content: center;
        max-width: 280px;
        margin-top: 10px;
        border: 2px #353941 solid;
        background-color: #0B1226;
        border-radius: 20px;
    }

    .next-match .container-timer .timer-partido {
        display: grid;
        grid-template-columns: repeat(7);
        grid-template-rows: 1fr;
        align-items: center;
        gap: 5px;
    }

    .next-match .container-timer>p {
        font-size: 12px;
    }

    .timer-partido-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .timer-partido p {
        font-size: 16px;
    }

    .timer-partido .timer-partido-card h1 {
        font-size: 14px;
    }

    .timer-partido .timer-partido-card p {
        font-size: 11px;
    }

    .matchT1 {
        grid-area: 1 / 1 / 2 / 2;
    }

    .matchT2 {
        grid-area: 1 / 3 / 2 / 4;
    }

    .matchT3 {
        grid-area: 1 / 5 / 2 / 6;
    }

    .matchT4 {
        grid-area: 1 / 7 / 2 / 8;
    }

    .fase-del-torneo {
        position: absolute;
        right: 10px;
        top: 10px;
        background-color: #050816;
        border: 1px #353941 solid;
        padding: 10px;
        border-radius: 10px;
    }

    .fase-del-torneo h1 {
        font-size: 11px;
    }

    .btn-fixture {
        width: 150px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: white;
        border-radius: 10px;
        background-color: var(--textoPrincipalColor);
        margin: 10px;
        font-size: 14px;
    }

    .container-acesso {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 10px;
        margin: 0;
    }

    .container-acesso>.cards {
        display: grid;
        grid-template-columns: repeat(2);
        grid-template-rows: repeat(2);
        gap: 10px;
        margin-top: 10px;
        align-items: center;
        justify-content: center;
    }

    .container-acesso>.cards>.card {
        width: 150px;
        height: 100px;
        padding: 10px;
        border: 1px solid #353941;
        border-radius: 10px;
        position: relative;
    }

    .container-acesso>.cards>.c1 {
        background: url('../../multimedia/Fondo-Card1.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .container-acesso>.cards>.c2 {
        background: url('../../multimedia/Fondo-Card2.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .container-acesso>.cards>.c3 {
        background: url('../../multimedia/Fondo-Card3.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .container-acesso>.cards>.c4 {
        background: url('../../multimedia/Fondo-Card4.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .container-acesso>.cards>.card h1 {
        font-size: 14px;
    }

    .container-acesso>.cards>.card p {
        font-size: 11px;
    }

    .container-acesso>.cards>.card a {
        position: absolute;
        margin: 0;
        padding: 0;
        right: 10px;
        bottom: 1px;
        text-decoration: none;
    }

    .container-acesso>h1{
        font-size: 16px;
    }

    .container-acesso>.cards>.card svg {
        margin: 0;
        color: var(--textoPrincipalColor);
        padding: 0;
    }

    .c1 {
        grid-area: 1 / 1 / 2 / 2;
    }

    .c2 {
        grid-area: 1 / 2 / 2 / 3;
    }

    .c3 {
        grid-area: 2 / 1 / 3 / 2;
    }

    .c4 {
        grid-area: 2 / 2 / 3 / 3;
    }

    .container-stats {
        padding: 10px;
        display: flex;
        flex-direction: column;
        background-color: #020b15;
        border: 1px solid #353941;
        border-radius: 10px;
    }

    .stats {
        display: grid;
        grid-template-columns: repeat(7);
        gap: 10px;
        padding: 10px;
    }

    .stats .stat {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 50px;
        text-align: center;
        padding: 10px;
    }

    .stats span {
        width: 1px;
        margin: 0 5px;
        background-color: var(--textoPrincipalColor);
        height: 100%;
    }

    .stats .stat svg {
        color: var(--textoPrincipalColor);
    }

    .stats .stat p {
        font-size: 10px;
    }

    .stats .stat h1 {
        font-size: 15px;
    }

    .st1 {
        grid-area: 1 / 1 / 2 / 2;
    }

    .st2 {
        grid-area: 1 / 3 / 2 / 4;
    }

    .st3 {
        grid-area: 1 / 5 / 2 / 6;
    }

    .st4 {
        grid-area: 1 / 7 / 2 / 8;
    }

    .info {
        display: none;
    }
}

@media (min-width: 1000px) {
    .container {
        width: 100%;
        min-width: 0;
        margin: 10px;
        display: grid;
        grid-template-columns: 1fr 1fr 300px;
        grid-template-rows: auto auto;
        gap: 12px;
        box-sizing: border-box;
        align-items: start;
    }

    .next-match        { grid-area: 1 / 1 / 2 / 4; }
    .container-acesso  { grid-area: 2 / 1 / 3 / 3; }
    .container-stats   { grid-area: 2 / 3 / 3 / 4; }

    .container .next-match {
        display: flex;
        flex-direction: column;
        padding: 30px;
        border: 1px solid #353941;
        border-radius: 20px;
        background: url('../../multimedia/fondo-next-macth.png');
        background-position: center;
        background-size: cover;
        position: relative;
        min-height: 320px;
        box-sizing: border-box;
        margin-bottom: 20px;
    }

    .next-match ul {
        display: flex;
        flex-direction: column;
        margin-top: 10px;
        gap: 8px;
        list-style: none;
        padding: 0;
    }

    .next-match ul li {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .next-match ul li p {
        font-size: 16px;
        margin: 0;
    }

    .next-match .container-timer {
        display: flex;
        flex-direction: column;
        margin-top: 20px;
        align-items: center;
        justify-content: center;
        padding: 16px 24px;
        background-color: rgba(8, 16, 24, 0.85);
        border: 1px solid #353941;
        border-radius: 20px;
        width: fit-content;
        max-width: 380px;
    }

    .next-match .container-timer > p {
        font-size: 14px;
        margin: 0 0 8px 0;
    }

    .next-match .timer-partido {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .timer-partido .timer-partido-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-width: 50px;
    }

    .timer-partido .timer-partido-card h1 {
        font-size: 28px;
        margin: 0;
        line-height: 1;
    }

    .timer-partido .timer-partido-card p {
        font-size: 10px;
        margin: 0;
        color: #c4c8ce;
    }

    .timer-partido > p {
        font-size: 28px;
        margin: 0;
        line-height: 1;
        color: var(--textoPrincipalColor);
    }

    .fase-del-torneo {
        position: absolute;
        right: 20px;
        top: 20px;
        padding: 8px 14px;
        background-color: rgba(14, 23, 23, 0.85);
        border: 1px solid #353941;
        border-radius: 10px;
    }

    .fase-del-torneo h1 {
        font-size: 14px;
        margin: 0;
        text-transform: uppercase;
    }

    .btn-fixture {
        position: absolute;
        bottom: 20px;
        right: 20px;
        width: 200px;
        height: 40px;
        background-color: var(--textoPrincipalColor);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #0e1717;
        text-decoration: none;
        gap: 10px;
        border-radius: 10px;
        font-weight: 600;
        font-size: 14px;
        transition: 0.5s ease;
    }

    .btn-fixture:hover {
        scale: 1.01;
    }

    .container-acesso {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-width: 0;
        padding: 0;
        margin: 0;
        gap: 12px;
        box-sizing: border-box;
    }

    .container-acesso > h1 {
        font-size: 18px;
        margin: 0;
    }

    .container-acesso > .cards {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .c1 { grid-area: 1 / 1 / 2 / 2; }
    .c2 { grid-area: 1 / 2 / 2 / 3; }
    .c3 { grid-area: 1 / 3 / 2 / 4; }
    .c4 { grid-area: 1 / 4 / 2 / 5; }

    .container-acesso > .cards > .card {
        width: 100%;
        min-width: 0;
        height: 160px;
        display: flex;
        flex-direction: column;
        position: relative;
        padding: 16px;
        border: 1px solid #353941;
        border-radius: 10px;
        box-sizing: border-box;
        gap: 6px;
    }

    .container-acesso > .cards > .card svg {
        width: 36px;
        height: 36px;
        color: var(--textoPrincipalColor);
        flex-shrink: 0;
    }

    .container-acesso > .cards > .card > a {
        position: absolute;
        right: 10px;
        bottom: 10px;
        color: var(--textoPrincipalColor);
    }

    .container-acesso > .cards > .card > a svg {
        width: 26px;
        height: 26px;
        transition: 0.5s ease;
    }

    .container-acesso > .cards > .card > a svg:hover {
        scale: 1.2;
    }

    .container-acesso > .cards > .card > h1 {
        font-size: 14px;
        margin: 0;
        text-transform: uppercase;
    }

    .container-acesso > .cards > .card > p {
        font-size: 12px;
        margin: 0;
        color: #c4c8ce;
    }

    .container-acesso > .cards > .c1 {
        background: url('../../multimedia/Fondo-Card1.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

    .container-acesso > .cards > .c2 {
        background: url('../../multimedia/Fondo-Card2.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

    .container-acesso > .cards > .c3 {
        background: url('../../multimedia/Fondo-Card3.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

    .container-acesso > .cards > .c4 {
        background: url('../../multimedia/Fondo-Card4.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

    .container-stats {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-width: 0;
        padding: 20px;
        border: 1px solid #353941;
        border-radius: 10px;
        background-color: #080f18;
        gap: 12px;
        box-sizing: border-box;
        align-self: stretch;
    }

    .container-stats > h1 {
        font-size: 15px;
        margin: 0;
        text-align: center;
    }

    .container-stats > .stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 10px;
        flex: 1;
    }

    .container-stats > .stats > .stat {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 10px;
        background-color: #081018;
        border: 1px solid #353941;
        border-radius: 10px;
        gap: 4px;
        box-sizing: border-box;
    }

    .container-stats > .stats > .stat svg {
        width: 26px;
        height: 26px;
        color: var(--textoPrincipalColor);
    }

    .container-stats > .stats > .stat p {
        font-size: 11px;
        color: #c4c8ce;
        margin: 0;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        text-align: center;
    }

    .container-stats > .stats > .stat h1 {
        font-size: 22px;
        margin: 0;
        color: var(--textoPrincipalColor);
    }

    .st1 { grid-area: 1 / 1 / 2 / 2; }
    .st2 { grid-area: 1 / 2 / 2 / 3; }
    .st3 { grid-area: 2 / 1 / 3 / 2; }
    .st4 { grid-area: 2 / 2 / 3 / 3; }

    .container-stats > .stats > span {
        display: none;
    }
}