.chevaliers-calendar {
    .calendar-container {
        color: white;
        text-align: var(--calendar-legend-align, center);

        @media (max-width: 991px){
            padding: 0;
        }

        .calendar-columns {
            display: flex;
            flex-wrap: wrap;
            gap: var(--calendar-columns-gap, 1.5rem);
            justify-content: center;

            .column {
                flex: 1 1 300px;
                max-width: 100%;
                display: flex;
                flex-direction: column;
                gap: var(--calendar-match-gap, 1.5rem);

                .match {
                    width: 100%;
                    overflow: hidden;
                    display: flex;
                    align-items: center;
                    background-color: #333;
                    padding: var(--calendar-match-padding, 0.5rem);
                    border-radius: var(--calendar-match-border-radius, 0px);
                    transition: transform 0.3s;
                    color: #fff;

                    @media (max-width: 991px){
                        flex-direction: column;
                    }

                    &:hover {
                        transform: scale(1.03);
                    }

                    .match-date {
                        display: block;
                        color: var(--calendar-date-color, #fff);
                    }

                    .match-info {
                        width: 100%;
                        padding: 0.5rem 1rem;
                        text-align: left;
                        display: flex;
                        align-items: center;
                        justify-content: space-around;
                        border-radius: var(--calendar-match-border-radius, 0px);

                        .results {
                            display: flex;
                            align-items: center;
                            gap: 20px;
                            
                            .location-badge {
                                color: var(--calendar-location-color, #fff);
                            }
                            .team-score {
                                color: var(--calendar-score-color, #fff);
                                @media (max-width: 991px){
                                    display: none;
                                }
                            }
                        }

                        .team {
                            display: flex;
                            align-items: center;
                            gap: 20px;

                            @media (max-width: 991px){
                                flex-direction: column;
                            }

                            .team-name {
                                margin-top: 1rem;
                                letter-spacing: 1px;
                                color: var(--calendar-team-color, #fff);
                            }

                            .team-logo {
                                width: 60px;
                                height: 60px;
                                object-fit: contain;
                            }

                            .team-score {
                                color: var(--calendar-score-color, #fff);
                                @media (min-width: 991px){
                                    display: none;
                                }
                            }
                        }
                    }
                }

                .match.home .match-info {
                    background-color: var(--calendar-home-bg, #c9a349); /* Gold */
                    color: var(--calendar-home-color, #fff);
                    
                    .team-name, .team-score, .location-badge {
                        color: var(--calendar-home-color, #fff);
                    }
                }

                .match.away .match-info {
                    background-color: var(--calendar-away-bg, #4a4a4a); /* Dark Grey */
                    color: var(--calendar-away-color, #fff);

                    .team-name, .team-score, .location-badge {
                        color: var(--calendar-away-color, #fff);
                    }
                }
            }
        }

        .legend {
            margin: 1rem 0;
            text-align: var(--calendar-legend-align, center);

            .badge {
                display: inline-block;
                padding: 0.3rem 0.8rem;
                margin: 0 0.5rem;
                color: #fff;
                border-radius: var(--calendar-badge-border-radius, 0px);
            }

            .badge.home {
                background-color: var(--calendar-badge-home-bg, #c9a349);
                color: var(--calendar-badge-home-color, #fff);
            }

            .badge.away {
                background-color: var(--calendar-badge-away-bg, #4a4a4a);
                color: var(--calendar-badge-away-color, #fff);
            }
        }
    }
}