@import "../../../foundations/sass/all";

.card {
  align-items: center;
  background: $white-floral;
  border-radius: 20px;
  box-shadow: 0 1px 4px 3px rgba(0 0 0 / 25%);
  box-sizing: border-box;
  display: flex;
  height: px-to-rem(170);
  justify-content: space-between;
  margin: px-to-rem(10);
  max-width: px-to-rem(588);
  padding: px-to-rem(10);

  &-image {
    border-radius: px-to-rem(20);
    height: px-to-rem(120);
    overflow: hidden;
    width: px-to-rem(120);

    @include laptop {
      height: px-to-rem(150);
      width: px-to-rem(150);
    }
  }

  &-text {
    box-sizing: border-box;
    color: $secondary-color;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    padding: px-to-rem(10);

    & > h3,
    & > h4 {
      font-family: Roboto, sans-serif;
      font-size: $fs-md;
      font-weight: $fw-bold;

      @include laptop {
        font-size: px-to-rem(20);
        font-weight: 700;
      }
    }

    p {
      @include body-font;

      font-size: $fs-sm;
      line-height: 21.09px;
    }
  }
}

.discount {
  border-radius: 4px;
  box-shadow: 0 0 6px 4px rgba(0 0 0 / 25%);
  box-sizing: border-box;
  grid-row: span 3;
  height: px-to-rem(570);
  margin: px-to-rem(10);
  width: px-to-rem(588);
}

.discount-full-width {
  box-shadow: 0 2px 6px 5px rgba(0 0 0 / 25%);
  box-sizing: border-box;
  grid-column: span 2;
  height: px-to-rem(323);
  margin: px-to-rem(10);
  width: px-to-rem(1214);
}
