@use "../../../styles/variables" as vars;
@use "../../../styles/fonts" as fonts;
@use "../../../styles/colors" as colors;
@use "../../../styles/screen" as screen;

.online-board-start-page {
  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: 0px center;
        background-size: 45px 45px;

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

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

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

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

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

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

  @media (max-width: vars.$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;
        }
      }
    }
  }

  .page-title {
    width: auto;
    display: inline-block;
    max-width: 100%;
    white-space: normal !important;
  }

  h1.text--white {
    @include fonts.font-overflow();

    @include screen.smTablet {
      font-size: fonts.$font-size-xxxl--tablet;
      margin-bottom: vars.$space-m + vars.$space-s;
      overflow: visible;
      white-space: normal;
    }

    @include screen.mobile {
      font-size: fonts.$font-size-xxxl--mobile;
      margin-bottom: vars.$space-m + vars.$space-s;
      margin-top: vars.$space-m;
      overflow: visible;
      white-space: normal;
    }
  }
}
