@use "src/styles/variables" as *;

.vm-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: $padding-medium;
  gap: $padding-medium;
  border-top: $border-divider;
  color: $color-text-secondary;
  background: $color-background-body;

  @media (max-width: 768px) {
    padding: $padding-global;
    gap: $padding-global;
  }

  &__link,
  &__website {
    display: grid;
    grid-template-columns: 12px auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  &__website {
    margin-right: $padding-global;

    @media (max-width: 768px) {
      margin-right: 0;
    }
  }

  &__link {
    grid-template-columns: 14px auto;
  }

  &__copyright {
    text-align: right;
    flex-grow: 1;

    @media (max-width: 768px) {
      width: 100%;
      font-size: $font-size-small;
      text-align: center;
    }
  }
}
