.agenda {
  position: relative;
  width: 100%;
  margin: 65px auto;

  @include sm {
    margin: 27px auto;
  }

  &__wrapper {
    width: 100%;
    padding: 65px $gutter;
    background-color: $gray-10;

    @include sm {
      padding: 27px $gutter;
    }
  }

  &__container {
    margin: 0 auto;
    max-width: $max-width;
  }

  &__title-container {
    width: 100%;
    padding-left: calc(100% / 12);
    display: flex;
    align-items: center;
    margin-bottom: 25px;

    @include md {
      padding-left: 0;
    }

    @include sm {
      margin-bottom: 19px;
      flex-wrap: wrap;
      margin-bottom: 0;
    }
  }

  &__title {
    flex: 1;
    margin: 0;

    @include sm {
      min-width: 200px;
      margin-bottom: 25px;
    }
  }

  &__button-container {
    display: flex;
    align-items: center;

    @include sm {
      margin-bottom: 25px;
    }
  }

  &__subtitle {
    color: $primary-color;
    margin: 0;
    font-weight: 700;

    @include sm {
      display: none;
    }
  }

  &__cta-container {
    padding-left: 16px;

    @include sm {
      padding-left: 0;
    }
  }

  &__container-items {
    width: 100%;
  }

  &__item {
    width: 100%;
    background-color: $white;
    padding: 10px calc(100% / 12) 24px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;

    p {
      margin: 0;
      font-size: 1.8rem;

      @include sm {
        font-size: 1.6rem;
      }
    }

    @include md {
      padding: 10px 24px 24px;
    }

    @include sm {
      flex-direction: column;
      margin-bottom: 8px;
    }
  }

  &__info {
    max-width: 650px;
  }

  &__time {
    margin: 0;

    @include sm {
      font-size: 1.6rem;
      line-height: 2.2rem;
    }
  }

  &__title-item {
    color: $primary-color;
    margin-top: 16px;
    margin-bottom: 8px;
  }

  &__description {
    color: $primary-color;
    font-size: 1.6rem;
  }

  &__speakers-container {
    width: 360px;
    max-width: 100%;
    flex-shrink: 0;
    margin-left: 10px;

    @include sm {
      margin-top: 32px;
      margin-left: 0;
    }
  }

  &__speakers-label {
    font-weight: 700;
    margin: 0;
    margin-bottom: 8px;
    width: 100%;
    max-width: 360px;
  }

  &__speakers-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
  }

  &__speakers-image {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;

    @include sm {
      width: 56px;
      height: 56px;
    }
  }

  &__speakers-info {
    margin-left: 16px;

    @include sm {
      margin-left: 8px;
    }
  }

  &__speakers-name {
    font-weight: 700;
    color: $primary-color;
    margin: 0;

    @include sm {
      font-size: 1.8rem;
      line-height: 2.4rem;
    }
  }

  &__speakers-job {
    font-size: 1.6rem;
    font-weight: 400;
    color: $primary-color;
  }

  &__item-footer {
    background-color: $secondary-color;
    width: 100%;
    padding: 12px calc(100% / 12);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    flex-wrap: wrap;

    @include sm {
      justify-content: space-between;
      padding: 9px 14px;
      padding: 12px calc(100% / 12) 0;
    }

    .agenda__cta-container {
      @include sm {
        margin: 9px 0;
        padding-left: 0;
      }
    }

    .std-button {
      white-space: nowrap
    }

    .agenda__subtitle {
      color: $white;
      padding: 0 10px;

      @include sm {
        font-size: 1.8rem;
        line-height: 2.4rem;
        display: block !important;
        margin: 9px 0;
      }
    }
  }
}