.match-summary {
  padding: 1.5rem; }
  .match-summary__top {
    margin-bottom: 1rem;
    text-align: center;
    color: #FFF;
    font-weight: bold; }
  .match-summary__competition {
    text-align: center;
    color: #C0A059;
    font-size: .875rem; }
  .match-summary__date {
    text-transform: uppercase; }
    .match-summary__date-time {
      text-transform: none; }
  .match-summary__score, .match-summary__middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
  .match-summary__score {
    color: #E42313;
    font-size: 2.5rem; }
    .match-summary__score-wrapper {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      font-size: 1.125rem;
      font-weight: 700;
      text-align: center;
      position: relative; }
      .match-summary__score-wrapper .match-summary__left,
      .match-summary__score-wrapper .match-summary__right {
        text-transform: uppercase; }
      .match-summary__score-wrapper img {
        margin-bottom: 1rem; }
  .match-summary__title {
    justify-content: space-between;
    text-transform: uppercase;
    display: flex; }
  .match-summary__title-part {
    width: 45%;
    text-align: center; }
  .match-summary__middle {
    color: #E42313;
    font-weight: 700;
    border-bottom: 1px solid #E42313;
    padding: 0 1rem; }
  .match-summary__left, .match-summary__right {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 45%; }
    .match-summary[class*="bg-black"] .match-summary__left, .match-summary[class*="bg-black"] .match-summary__right {
      color: #FFF; }
  .match-summary__info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: .875rem;
    position: relative;
    margin-top: 1rem; }
    .match-summary[class*="bg-black"] .match-summary__info {
      color: #FFF; }
    .match-summary__info-separator {
      width: 1px;
      height: 120%;
      background-color: #000;
      position: absolute;
      top: 30%;
      left: 50%;
      transform: translate(-50%, -50%); }
      .match-summary[class*="bg-black"] .match-summary__info-separator {
        background-color: #FFF; }
  .match-summary__player {
    margin-bottom: .5rem; }