#settingsIntervalGrid {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    align-items: center;
    text-align: center;
    margin: 0.2cm 0;
}

#gaugeGrid {
    display: grid;
    grid-template-columns: 20% 30% 20% 30%;
    grid-template-rows: 2.8cm 2.8cm 2.8cm 1cm;
    align-items: center;
}

.gaugeGridItemIcon {
    text-align: center;
}

.gaugeGridItemIcon img {
    width: 1.8cm;
    height: 1.8cm;
}

.gaugeGridItemLabel {
    text-align: left;
    padding: 0.4cm;
    font-size: 1.0cm;
}

.gaugeGridItemTime {
    grid-column-start: 1;
    grid-column-end: 5;
    text-align: center;
}

#currentWindSpeedGrid {
    display: inline-grid;
    grid-column-gap: 0.2cm;
    align-items: center;
}

#currentWindSpeed {
    text-align: right;
    grid-column: 1;
    grid-row: 1;
}

#currentWindGusts {
    text-align: right;
    grid-column: 1;
    grid-row: 2;
    color: #808080;
}

#currentWindSpeedUnit {
    grid-column: 2;
    grid-row-start: 1;
    grid-row-end: 3;
}

#currentWindSpeedBeaufortNumber {
    font-size: 1.8cm;
}

.chart {
    width: 100%;
    height: 12cm;
}

.chartLegend {
    display: grid;
    grid-template-columns: 4.8cm auto;
    margin: 0.4cm;
    align-content: center;
}

.chartValues {
    grid-column: 1;
    align-self: center;
    display: grid;
    grid-template-columns: 2.0cm auto auto;
}

.chartIco {
    grid-column: 1;
    grid-row-start: 1;
    grid-row-end: 4;
    width: 1.6cm;
    height: 1.6cm;
    align-self: center;
}

.chartValuesMin {
    grid-row: 1;
}
.chartValuesAvg {
    grid-row: 2;
}
.chartValuesMax {
    grid-row: 3;
}

.chartValuesLabel {
    grid-column: 2;
    font-size: 0.5cm;
}

.chartValuesValue {
    grid-column: 3;
    font-size: 0.5cm;
    text-align: right;
}

.chartUnits {
    grid-column: 3;
    text-align: right;
    align-self: center;
}

.unitSelector {
    display: inline-flex;
    margin-left: 0.4cm;
    font-size: 0.8cm;
}

@media screen and (max-width: 24cm) {

    #gaugeGrid {
        grid-template-rows: 2.4cm 2.4cm 2.4cm 0.8cm;
    }

    .gaugeGridItemIcon img {
        width: 1.4cm;
        height: 1.4cm;
    }

    .gaugeGridItemLabel {
        font-size: 0.6cm;
    }

    #currentWindSpeedBeaufortNumber {
        font-size: 1.4cm;
    }

    .chart {
        height: 10cm;
    }

    .chartLegend {
        grid-template-columns: 4.8cm auto;
    }

    .chartValues {
        grid-template-columns: 1.8cm auto auto;
    }

    .chartIco {
        width: 1.4cm;
        height: 1.4cm;
    }

    .chartValuesLabel, .chartValuesValue {
        font-size: 0.5cm;
    }

    .unitSelector {
        margin-left: 0.4cm;
        font-size: 0.8cm;
    }

    @media (max-width: 16cm) {

        #gaugeGrid {
            grid-template-rows: 2.0cm 2.0cm 2.0cm 0.8cm;
        }

        .gaugeGridItemIcon img {
            width: 1.0cm;
            height: 1.0cm;
        }

        .gaugeGridItemLabel {
            font-size: 0.5cm;
        }

        #currentWindSpeedBeaufortNumber {
            font-size: 1.0cm;
        }

        .chart {
            height: 8cm;
        }

        .chartLegend {
            grid-template-columns: 4.4cm auto;
        }

        .chartValues {
            grid-template-columns: 1.6cm auto auto;
        }

        .chartIco {
            width: 1.0cm;
            height: 1.0cm;
        }

        .chartValuesLabel, .chartValuesValue {
            font-size: 0.5cm;
        }

        .unitSelector {
            margin-left: 0.4cm;
            font-size: 0.7cm;
        }

        @media (max-width: 12cm) {

            #gaugeGrid {
                grid-template-rows: 1.6cm 1.6cm 1.6cm 0.6cm;
            }

            .gaugeGridItemIcon img {
                width: 0.6cm;
                height: 0.6cm;
            }

            .gaugeGridItemLabel {
                font-size: 0.4cm;
            }

            #currentWindSpeedBeaufortNumber {
                font-size: 0.6cm;
            }

            .chart {
                height: 6cm;
            }

            .chartLegend {
                grid-template-columns: 2.6cm auto;
            }

            .chartValues {
                grid-template-columns: 0.8cm auto auto;
            }

            .chartIco {
                width: 0.6cm;
                height: 0.6cm;
            }

            .chartValuesLabel, .chartValuesValue {
                font-size: 0.3cm;
            }

            .unitSelector {
                margin-left: 0.4cm;
                font-size: 0.5cm;
            }

        }

    }

}