testimonials.scss

// Primary Colors
$moderate-violet: hsl(263, 55%, 52%);
$very-dark-grayish-blue: hsl(217, 19%, 35%);
$very-dark-blackish-blue: hsl(219, 29%, 14%);
$white: hsl(0, 0%, 100%);

// Neutral Colors
$light-gray: hsl(0, 0%, 81%);
$light-grayish-blue: hsl(210, 46%, 95%);

// breakpoints
$md: 768px;

* {
  box-sizing: border-box;
}

body {
  margin: 0;

  main {
    font-family: "Barlow Semi Condensed", sans-serif;
    background-color: $light-grayish-blue;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 4rem 1.7rem;

    .container {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: max(1.9vw, 1.5rem);
      width: max(80vw, 60rem);

      .card {
        padding: max(2.2vw, 1.5rem);
        border-radius: 10px;

        // card positions start
        &.card-1,
        &.card-4 {
          grid-column: span 2 / span 2;
        }
        &.card-5 {
          grid-row: 1 / span 2;
          grid-column: 4;
        }
        // card positions end

        // card styles start
        .heading {
          display: flex;
          align-items: center;
          column-gap: 1rem;
          position: relative;

          .img-wrapper {
            position: relative;
            width: 2.2rem;
            height: 2.2rem;
            display: flex;
            justify-content: center;
            align-items: center;

            .border {
              position: absolute;
              width: 100%;
              height: 100%;
              z-index: 1;
              border-radius: 50%;
              opacity: 50%;
            }

            img {
              width: 90%;
              height: 90%;
              border-radius: 50%;
              position: relative;
              z-index: 10;
            }
          }

          .text {
            h1,
            h2 {
              margin-block: 0;
              font-weight: 400;
            }

            h1 {
              font-size: 0.9rem;
            }

            h2 {
              font-size: 0.8rem;
              opacity: 50%;
            }
          }
        }

        .main {
          position: relative;

          h3 {
            font-weight: 500;
          }
        }

        .desc {
          p {
            opacity: 70%;
            font-size: 0.9rem;
          }
        }
        // card styles end

        // individual card styles start
        &.card-1 {
          background-color: $moderate-violet;
          color: $white;
          position: relative;

          .heading .img-wrapper .border {
            background-color: $white;
          }

          &::before {
            content: "";
            background-image: url("https://raw.githubusercontent.com/khatri2002/testimonials-grid-section/e8e46d2c6e99c1e65142988a356eedd01037133d/images/bg-pattern-quotation.svg");
            position: absolute;
            width: 7rem;
            height: 7rem;
            background-size: 7rem 7rem;
            top: 0;
            right: 5.5vw;
          }
        }

        &.card-2 {
          background-color: $very-dark-grayish-blue;
          color: $white;
        }

        &.card-3,
        &.card-5 {
          background-color: $white;
          color: $very-dark-grayish-blue;
        }

        &.card-4 {
          background-color: $very-dark-blackish-blue;
          color: $white;

          .heading .img-wrapper .border {
            background-color: $moderate-violet;
          }
        }
        // individual card styles end
      }

      @media screen and (width <= $md) {
        // grid columns configuration
        grid-template-columns: repeat(1, minmax(0, 1fr));

        .card {
          // card positions
          &.card-1,
          &.card-4 {
            grid-column: auto;
          }
          &.card-5 {
            grid-row: auto;
            grid-column: auto;
          }

          // card styles
          .main h3 {
            font-size: 1.1rem;
          }
        }
      }
    }
  }
}