@import '../../partials/variables';
@import '../../lib/mixins';

.card {
  display: flex;
  flex-direction: column;

  margin: 20px 0;
  @include block-padding;

  width: 50%;

  background-color: var(--background-color);

  @media (max-width: $mobile-breakpoint) {
    width: initial;
  }

  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 15px 0;

    border-bottom: 2px var(--border-color) solid;
  }

  &__content {
    display: flex;
    padding: 10px 0;
  }

  &__footer {
    display: flex;
    padding: 10px 0;
  }

  & .favicon {
    height: 20px;
  }
}
