online-board-start-page,
schedule-start {
    section.frame {
        padding: 0;

        h2 {
            padding: 50px;
            padding-bottom: 20px;
        }

        .titles-container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            padding: 0 50px;
            padding-bottom: 50px;

            .title {
                width: 50%;
                padding: 30px;
                padding-right: 50px;
                padding-left: 65px;
                background-repeat: no-repeat;
                background-position: left center;

                a {
                    cursor: default;
                    font-size: $font-size-xl;
                }

                div {
                    color: $gray;
                    padding-top: $space-s;
                }

                &.title1 {
                    background-image: url('~src/assets/img/title-icon-1.svg');
                }

                &.title2 {
                    background-image: url('~src/assets/img/title-icon-2.svg');
                }

                &.title3 {
                    background-image: url('~src/assets/img/title-icon-3.svg');
                }

                &.title4 {
                    background-image: url('~src/assets/img/title-icon-4.svg');
                }
            }
        }
    }

    .not-found-location {
        background-repeat: no-repeat;
        background-position: left center;
        background-image: url('~src/assets/img/not-found-location.svg');
        padding-left: 40px;
        @include font-small();
        color: transparentize($color: $white, $amount: 0.3);
        font-size: $font-size-s;
        max-width: 620px;
        margin-top: $space-xl;
        white-space: pre-line;
        line-height: 1.4;
    }

    @media (max-width: $media-breakpoint-mobile) {
        section.frame h2 {
            font-size: 24px;
        }
    }

    @media (max-width: $media-breakpoint-mobile) {
        section.frame h2 {
            padding: 20px;
            font-size: 20px;
            line-height: 28px;
            padding-bottom: 0px;
            padding-top: 30px;
        }

        .titles-container {
            padding: 20px !important;
            padding-top: 0 !important;

            div.title {
                width: 100% !important;
                padding: 20px !important;
                padding-left: 50px !important;
                background-size: 35px auto !important;

                a {
                    font-size: 16px;
                }
            }
        }
    }
}

schedule-start {
    .titles-container {
        .title {
            &.title1 {
                background-image: url('~src/assets/img/schedule-title-icon-1.svg') !important;
            }

            &.title2 {
                background-image: url('~src/assets/img/schedule-title-icon-2.svg') !important;
            }

            &.title3 {
                background-image: url('~src/assets/img/schedule-title-icon-3.svg') !important;
            }

            &.title4 {
                background-image: url('~src/assets/img/schedule-title-icon-4.svg') !important;
            }

            &.title5 {
                background-image: url('~src/assets/img/schedule-title-icon-5.svg') !important;
            }

            &.title6 {
                background-image: url('~src/assets/img/schedule-title-icon-6.svg') !important;
            }
        }
    }

    .popular-chapters-container {
        background-color: $blue-extra-light;
        border-top: 1px solid $border;
        padding: 50px 50px 30px;
        border-radius: 0 0 $border-radius $border-radius;

        h3 {
            font-size: 20px;
            margin: 0;
            font-weight: $font-regular;
            padding-bottom: 20px !important;

            @media (max-width: $media-breakpoint-mobile) {
                padding-bottom: 0px !important;
            }
        }

        .titles-container {
            padding: 0 !important;
        }
    }
}
