.draw-cont .draw {
    width: 100%;
    padding: 2rem;

    display: grid;
    grid-template-columns: 190px 100px 1fr 100px 190px;
    grid-template-rows: 75px 275px 75px;
    gap: 1rem;

    background-color: whitesmoke;

    box-shadow: 0 0 5px #aaa;
    border-radius: 1rem;

    .day {
        grid-column: 1/6;
        grid-row: 1/2;

        display: flex;
        align-items: center;
        justify-content: center;
        
        & h5 {
            padding: 1rem;
            height: fit-content;

            font-family: oswaldo;
            font-size: 2.4rem;
            font-weight: 400;
            text-align: center;
        }
    }

    .del {
        grid-column: 5/6;
        grid-row: 1/2;

        display: flex;
        align-items: center;
        justify-content: end;

        & img {
            aspect-ratio: 1/1;
            height: 80%;
            cursor: pointer;
        }
    }

    .team {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        
        & h4 {
            width: 50%;
            height: fit-content;

            font-size: 1.6rem;
        }

        #img1 {
            width: 50%;
            height: 100%;

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

            & img {
                aspect-ratio: 1/1;
                height: 90%;
            }
        }
    }

    .team1 {
        grid-column: 1/2;
        grid-row: 2/3;
    }

    .scr {
        display: flex;

        & button {
            height: 90%;
            font-size: 1.6rem;
        }
    }

    .tm1_scr {
        grid-column: 1/3;
        grid-row: 3/4;

        justify-content: left;
    }

    .tm2_scr {
        grid-column: 4/6;
        grid-row: 3/4;

        justify-content: right;
    }

    .tmScr1 {
        grid-column: 2/3;
        grid-row: 2/3;
    }

    .tmScr2 {
        grid-column: 4/5;
        grid-row: 2/3;
    }

    .scrTxt {
        display: flex;
        align-items: center;
        justify-content: center;

        font-size: 2.8rem;
        font-weight: 600;
    }

    .time {
        grid-column: 3/4;
        grid-row: 2/3;

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

        & h3 {
            font-size: 2.2rem;
            text-align: center;
        }
    }

    .team2 {
        grid-column: 5/6;
        grid-row: 2/3;
    }

    .team .team-wrap {
        width: 100%;
        height: 100%;
        padding: 0;

        display: grid;
        grid-template-rows: 1fr 1fr;
        gap: 10px;

        #img1 {
            width: 100%;
            grid-row: 1;

            & img {
                width: 100%;
                border-radius: 1rem;
            }
        }

        & h4 {
            width: 100%;
            font-size: 1.8rem;
            text-align: center;
        }
    }

    .venue {
        grid-column: 2/5;
        grid-row: 3/4;

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

        & h6 {
            font-size: 1.8rem;
            text-align: center;
        }
    }

    .mts_status {
        grid-column: 1/3;
        & label {
            font-size: 1.6rem;
        }
        & select {
            width: 100%;
            padding: .5rem;
            font-size: 2rem;
        }
    }
}

#mts-status {
    font-size: 2rem;
    color: green;
}

.text-lightmaroon {
    color: rgb(100, 0, 0);
}

.text-darkgreen {
    color: darkgreen;
}

.text-hotpink {
    color: hotpink;
}

@media(min-width: 1024px){
    .draw-cont .draw {
        width: 100%;
        padding: 1rem 2rem 1rem 2rem;

        display: grid;
        grid-template-columns: 1fr 80px 1fr 80px 1fr;
        grid-template-rows: 50px 100px 50px;

        background-color: whitesmoke;

        box-shadow: 0 0 5px #aaa;
        border-radius: 1rem;

        .day {
            grid-column: 2/5;
            grid-row: 1/2;

            display: flex;
            align-items: center;
            justify-content: center;
            
            & h5 {
                height: fit-content;

                font-family: oswaldo;
                font-size: 1.1rem;
                font-weight: 600;
                text-align: center;
            }
        }

        .del {
            grid-column: 5/6;
            grid-row: 1/2;

            display: flex;
            align-items: center;
            justify-content: end;

            & img {
                aspect-ratio: 1/1;
                height: 40%;
                cursor: pointer;
            }
        }

        .team1 {
            grid-column: 1/2;
            grid-row: 2/3;
        }

        .team2 {
            grid-column: 5/6;
            grid-row: 2/3;
        }

        .team .team-wrap {
            height: 100%;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr;

            align-items: center;
            justify-content: center;
            
            & h4 {
                width: 100%;
                height: fit-content;
                text-align: left;

                font-size: 1.4rem;
            }

            #img1 {
                grid-column: 1/1;

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

                & img {
                    width: 70px;
                    height: 70px;
                }
            }
        }

        .team1 .team-wrap {
            #img1 {
                grid-column: 2/3;
            }

            & h4 {
                text-align: right;
            }
        }

        .scr {
            display: flex;

            & button {
                height: 32px;
                font-size: 1rem;
            }
        }

        .tm1_scr {
            grid-column: 1/3;
            grid-row: 3/4;

            justify-content: left;
        }

        .tm2_scr {
            grid-column: 4/6;
            grid-row: 3/4;

            justify-content: right;
        }

        .tmScr1 {
            grid-column: 2/3;
            grid-row: 2/3;
        }

        .tmScr2 {
            grid-column: 4/5;
            grid-row: 2/3;
        }

        .scrTxt {
            display: flex;
            align-items: center;
            justify-content: center;

            font-size: 1.2rem;
            font-weight: 600;
        }

        .time {
            grid-column: 3/4;
            grid-row: 2/3;

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

            & h3 {
                text-align: center;
            }
        }

        .venue {
            grid-column: 3/4;
            grid-row: 3/4;

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

            & h6 {
                font-size: 1.1rem;
                text-align: center;
            }
        }

        .mts_status {
            grid-column: 1/2;
            & label {
                font-size: 1rem;
            }
            & select {
                width: 50%;
                padding: 0;
                font-size: 1rem;
            }
        }
    }

    #mts-status {
        font-size: 1.2rem;
    }
}