@import "@/styles/mixins.scss";
@import "@/styles/variables.scss";

.container {
  .customContainer {
    max-width: 54rem;
    margin: 3.75rem auto;
  }
  .h2 {
    color: $font-color-10;
    @include h2();
  }
  .infoContainer {
    max-height: 20rem;
    margin: 1.5rem 0 0;
    padding: 2.5rem;
    background: $grey-light;
    border-radius: $radius;
    @include flex(flex-start, flex-start, column, wrap);
    .info {
      margin-bottom: 2.5rem;
      .key {
        color: $font-color-6;
        margin-bottom: 0.5rem;
      }
      section {
        color: $font-color-10;
        .value {
          margin-bottom: 0.5rem;
        }
      }
    }
  }
  :global(.container:not(.is-max-desktop):not(.is-max-widescreen)) {
    &.customContainer {
      max-width: 54rem;
    }
  }
}

@media screen and (max-width: $mobile) {
  .container {
    .infoContainer {
      max-height: none;
    }
  }
}