:root {
  --pink: #ed1b7c
}

a,
a:focus,
a:hover {
  color: #2f2f2f
}

body,
html {
  height: 100%;
  background-color: #fff;
  font-family: Poppins, sans-serif;
  font-weight: 400;
  font-style: normal
}

.brand-logos {
  display: flex;
  flex-direction: row;
  background-color: var(--pink);
  justify-content: center;
  padding-block: 50px;
  flex-wrap: wrap
}

.brand-logos img {
  max-width: 200px;
  padding: 20px
}

body {
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  color: #000
}

.copyright {
  background: #eee;
  padding-block: 10px
}

h1,
h2,
h3 {
  color: var(--pink);
  font-weight: 700
}

.productGrid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto auto;
  gap: 0
}


@media only screen and (max-width:768px) {
  .productGrid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.productGrid img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.social-icons {
  display: flex;
  flex-direction: row;
  justify-content: center
}

.social-icons svg {
  width: 30px;
  margin: 10px
}

.intro-content {
  max-width: 900px;
  width: 90%;
  margin-inline: auto;
  padding-block: 50px
}

.cover-heading img {
  max-width: 400px;
  width: 60%
}