/**
 * The following CSS is the default to display MyClub groups title.
 */

.myclub-groups-title {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;

  .myclub-groups-title-container {
    max-width: 820px;
    width: 100%;

    .myclub-groups-title-box {
      background-color: #fff;
      width: 100%;
      display: flex;
      padding: 0.5rem;
      flex-direction: column;
      box-sizing: border-box;

      .myclub-groups-title-image {
        box-sizing: border-box;
        position: relative;
        padding: 0.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;

        img {
          width: 100%;
          height: auto;
        }
      }

      .myclub-groups-title-information {
        box-sizing: border-box;
        padding: 0.5rem;
        width: 100%;

        .myclub-groups-title-name {
          font-size: 2.5rem;
          margin-bottom: 1rem;

          &.with-info-text {
            margin-bottom: 0.5rem;
          }
        }

        .myclub-groups-info-text {
          font-size: smaller;
          margin-bottom: 1rem;
        }

        .label {
          font-size: small;
          text-transform: uppercase;
        }

        .value {
          font-size: 1.25rem;
        }

        .myclub-groups-information {
          margin-bottom: 0.5rem;
        }
      }
    }
  }
}

@media(min-width: 996px) {
  .myclub-groups-title {
    .myclub-groups-title-container {
      max-width: 996px;

      .myclub-groups-title-box {
        flex-direction: row;

        .myclub-groups-title-image {
          flex: 50%;
        }

        .myclub-groups-title-information {
          flex: 50%;
        }
      }
    }
  }
}

@media(min-width: 1200px) {
  .myclub-groups-title {
    .myclub-groups-title-container {
      max-width: 1200px;
    }
  }
}