.country-box {
  display: flex;
  padding: $margin-normal;
  border-radius: $margin-normal;
  background: $color-white;
  box-shadow: $box-shadow-card;
  cursor: pointer;
  color: $text-color;

  &:hover {
    background: $color-blue-100;
    text-decoration: none;
  }

  &__image {
    margin-right: $margin-normal;
    height: 36px;

    @include breakpoint(sm) {
      height: 48px;
    }

    .country-flag {
      width: 36px;
      height: 36px;
      border-radius: $margin-half;

      @include breakpoint(sm) {
        width: 48px;
        height: 48px;
      }
    }
  }

  &__info {
    flex: 1;
    max-width: 150px;

    &-name {
      @include font-size(16);
      font-weight: bold;
      margin-bottom: 2px;

      @include breakpoint(sm) {
        @include font-size(18);
        margin-bottom: $margin-half;
      }
    }

    &-destination {
      font-style: italic;
      @include font-size(12);

      @include breakpoint(sm) {
        @include font-size(16);
      }
    }

    &-name,
    &-destination {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  &__price-info {
    text-align: right;
    flex: 1;

    &-label {
      @include font-size(12);
      font-style: italic;
      margin-bottom: 2px;

      @include breakpoint(sm) {
        @include font-size(16);
        margin-bottom: $margin-half;
      }
    }

    &-value {
      @include font-size(16);
      font-weight: bold;

      @include breakpoint(sm) {
        @include font-size(18);
      }
    }
  }
}