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

.items-page {
  max-width: px-to-rem(1440);

  & > h3 {
    color: $secondary-color;
    font-size: $fs-xl;
    font-weight: $fw-semibold;
    margin: px-to-rem(10) 0;
    padding: px-to-rem(10);
    text-align: center;

    @include laptop {
      @include secondary-heading;

      line-height: 41.02px;
    }
  }

  &-searchbox {
    margin: px-to-rem(10) 0;
    padding: px-to-rem(10) 0;
  }

  &-container {
    display: grid;
    grid: repeat(2, auto);
    grid-gap: 10px;
    margin: 0 auto;
    max-width: px-to-rem(1254);

    .item-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);
      padding: px-to-rem(10);
      width: px-to-rem(588);

      &-img {
        border-radius: px-to-rem(20);
        height: px-to-rem(150);
        min-width: px-to-rem(150);
        overflow: hidden;
        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: px-to-rem(20);
          font-weight: 700;
        }

        p {
          @include body-font;

          line-height: 21.09px;
        }
      }
    }

    .discount-image {
      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-image-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);
    }
  }
}
