@use "system/typography";
@use "system/spacing";

.ods-contactpoint {
  &__media {
    @extend %ods-margin-bottom-2, %ods-margin-bottom-3-breakpoint-large;

    max-width: 40%;

    img {
      object-fit: cover;
      width: 100%;
      border-radius: 50%;
    }
  }

  &__heading {
    @extend %ods-text--size-india, %ods-text--size-golf-breakpoint-large;
    @extend %ods-padding-bottom-1;
    @extend %ods-text--weight-medium;
  }

  &__media + &__heading {
    @extend  %ods-text--size-hotel-breakpoint-large;
  }

  &__group {
    @extend %ods-margin-bottom-3;
  }

  &__label {
    @extend %ods-margin-top-2, %ods-margin-top-3-breakpoint-large;
    @extend %ods-text--size-kilo, %ods-text--size-juliett-breakpoint-large, %ods-text--weight-medium;
  }

  &__value {
    @extend %ods-text--size-kilo, %ods-text--size-juliett-breakpoint-large, %ods-text--weight-light;
  }

  &__time {
    @extend %ods-text--size-lima, %ods-text--weight-light;
  }

  &__affiliation {
    @extend %ods-text--size-kilo, %ods-text--size-juliett-breakpoint-large, %ods-text--weight-light;
    @extend %ods-margin-bottom-1;
  }

  &__role {
    @extend %ods-text--size-lima, %ods-text--weight-light;
  }
}