.host-details {
  // grid layout styles for the host details page
  &__details-panel {
    display: grid;
    gap: $pad-medium;
    // this gives a single column grid layout for the details panel content
    // at smaller screen widths
    grid-template-columns: minmax(0, 1fr);
  }

  &__header-summary {
    display: flex;
    flex-direction: column;
    gap: $pad-medium;
  }

  @media screen and (min-width: $break-md) {
    // This details tab must be selected to use these grid stylings. They are
    // irrelevant for the other tabs.
    &__details-panel {
      // We want the grid to be 2 columns on medium and larger screens and for
      // those two columns to always be equal width and take up half the
      // available space. We use 50% here instead of 1fr as there were some
      // issue with the tooltips in some of the cards forcing the card to be
      // wider then half the available space.
      grid-template-columns: repeat(2, minmax(0, 50%));
    }

    // these are used for positiong the cards in the grid. place these classes
    // on the cards depending on the layout needed.
    &__card {
      grid-column: span 1; // card will be 1 column x 1 row

      &--full-width {
        grid-column: span 2; // card will fill the whole row
      }

      &--double-height {
        grid-row: span 2; // card will be 1 column x 2 rows
      }
    }
  }

  .about-card,
  .agent-options-card {
    .info {
      &__item {
        &--about {
          margin-right: 92px;
          flex-direction: row;
        }
      }
      &__data {
        margin-bottom: $pad-medium;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }

  .button img {
    transform: scale(0.5);
  }

  &__button-wrap {
    display: flex;
    justify-content: flex-end;
    margin: $pad-xxlarge 0 0;
  }

  .tooltip__tooltip-icon {
    img {
      vertical-align: middle;
      height: 16px;
      width: auto;
    }
  }
}
