.plugins {
  background-color: #f6f8fa;
  padding: 2rem 1rem;

  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;

  @media screen and (min-width: 1024px) {
    flex-direction: row;

    padding: 5rem 2rem;
  }

  @media screen and (min-width: 1440px) {
    justify-content: center;
  }
}

.pluginsText {
  max-width: 30rem;

  @media screen and (min-width: 1024px) {
    margin-right: 1rem;
  }
  @media screen and (min-width: 1440px) {
    margin-right: 2rem;
  }

  @media screen and (min-width: 1920px) {
    max-width: 40rem;
  }
}

.pluginsCTA {
  @media screen and (min-width: 1024px) {
    margin-bottom: 0;
  }
}

.pluginsGrid {
  display: none;

  flex: 0 0 0;

  @media screen and (min-width: 375px) {
    display: grid;
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    grid-template-columns: repeat(2, 10rem);
  }
  @media screen and (min-width: 768px) {
    grid-template-columns: repeat(3, 10rem);
  }
  @media screen and (min-width: 1024px) {
    margin-left: 1rem;
  }
  @media screen and (min-width: 1440px) {
    margin-left: 2rem;
  }
  @media screen and (min-width: 1920px) {
    grid-template-columns: repeat(6, 10rem);
  }
}

.pluginCard {
  color: var(--ifm-color-secondary);
  box-shadow: 1px 2px 5px 1px #ddd;
  background: var(--ifm-color-white);
  padding: 1rem;
  display: flex;
  flex-direction: column;

  @media(min-width: 768px) {
    transform: scale(0.95);
    transition: box-shadow .2s ease-in, transform .2s ease-in;

    &:hover {
      transform: scale(1);
      box-shadow: 6px 7px 8px 5px #ddd;
      transition: box-shadow .2s ease-in, transform .2s ease-in;
    }
  }
}

.pluginLogo {
  max-height: 100px;
  margin: auto;
}

.pluginName {
  font-size: 0.9rem;
  text-align: center;
  margin-top: 0.5rem;
}
