.section-featured-products {
  background-color: var(--cloud);
  border-top: var(--border--light);
  border-bottom: var(--border--light);

  .featured-products {
    padding-top: var(--gap-xl);
    padding-bottom: var(--gap-xl);
    display: flex;
    flex-direction: column;
    gap: var(--gap-l);

    .featured-products__header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;

      hgroup {
        display: flex;
        flex-direction: column;
        gap: var(--gap-s);

        p {
          font-size: var(--font-14);
          color: var(--ink);
        }
      }
    }

    .featured-products__content {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--gap-l);

      .featured-products__card {
        display: flex;
        flex-direction: column;
        gap: var(--gap-s);

        .card-media {
          position: relative;
          width: 100%;
          padding-top: 100%;
          overflow: hidden;
          background-color: white;

          img {
            top: var(--gap-xs);
            left: var(--gap-xs);
            width: calc(100% - var(--gap-xs) * 2);
            height: calc(100% - var(--gap-xs) * 2);
            transition: var(--transition-all);
            transition-duration: .32s;
          }
        }

        h3 {
          padding-top: var(--gap-xs);
          font-size: var(--font-18);
          letter-spacing: 0;
        }

        & > span, p {
          font-size: var(--font-14);
          opacity: .64;
        }

        &:hover {
          .card-media {
            img {
              width: 100%;
              height: 100%;
              left: 0;
              top: 0;
            }
          }
        }
      }
    }
  }
}

@media only screen and (max-width: 989px) {
  .section-featured-products {
    .featured-products {
      .featured-products__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--gap);
      }

      .featured-products__content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
  }
}