@use "../mixins/media-queries";
@use '../fonts/poppins';
@use '../fonts/volkhov';

.product-card {
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  position: relative;

  @include media-queries.lg {
    display: flex;
    height: 260px;
  }

  &__data {
    flex: 1 1 auto;
    padding: 42px 42px 90px 42px;
    position: relative;

    h2 {
      cursor: pointer;
      padding-right: 56px;
    }
  }

  &__subtitle {
    font-size: 12px;
    font-weight: 500;
    color: #8A8A8A;
    margin-bottom: 20px;
  }

  &__information {
    @extend .volkhov-bold-italic;
    font-size: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #000;
    position: absolute;
    top: 42px;
    right: 42px;
    color: #FFF;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
  }

  &__confidence {
    &-container {
      position: absolute;
      bottom: 42px;
      left: 42px;
    }
  }
}