/* style-year.css */

.main {
    .year_box {
        .container {
            clear: both;
            margin: 0 auto;
            width: var(--year-container-width-default);

            @media only screen and (min-width: 481px) {
                width: var(--year-container-width-mobile);
            }

            @media only screen and (min-width: 768px) {
                width: var(--year-container-width-tablet);
            }

            h3 {
                margin-top: var(--space-zero);
                margin-bottom: var(--space-zero);

                a {
                    color: var(--new-color-blue-800);
                }
            }

            .month {
                margin: var(--space-100em) 0;
                width: var(--month-width);

                div {
                    @media only screen and (min-width: 481px) {
                        font-size: var(--year-month-cell-font-mobile);
                        height: var(--year-month-cell-height-mobile);
                        line-height: var(--year-month-cell-lineheight-mobile);
                    }

                    @media only screen and (min-width: 768px) {
                        font-size: var(--year-month-cell-font-tablet);
                        height: var(--year-month-cell-height-tablet);
                        line-height: var(--year-month-cell-lineheight-tablet);
                    }
                }
            }
        }

        @media only screen and (min-width: 481px) {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
    }
}