/* Home page styles */

#main-section {
  max-width: 900px;
  margin: 3rem auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
}

.drink-container {
  /* edged corner on card */
  clip-path: polygon(0 0, calc(100% - 2rem) 0, 100% 2rem, 100% 100%, 0 100%);
  /* edged corner on card end */
  background-color: var(--primary-color);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  padding-bottom: 1rem;
  transition: var(--transition);
}

.drink-container img {
  /* edged corner on card */
  clip-path: polygon(0 0, calc(100% - 2rem) 0, 100% 2rem, 100% 100%, 0 100%);
  /* edged corner on card end*/
  filter: saturate(0.7) contrast(0.9);
  transition: var(--transition);
}

.drink-container:hover {
  scale: 1.02;
  transition: var(--transition);
  img {
    filter: saturate(1);
  }
}

.drink-container h3,
.drink-container p {
  padding: 0 1rem 0.3rem 1rem;
}

.btn {
  max-width: 9rem;
  margin: auto 1rem 0 1rem;
  transition: var(--transition);
}

.drink-image-list {
  width: 100%;
  height: 17rem;
  object-fit: cover;
}

.extra-info {
  text-align: center;
  margin: 3rem auto;
  max-width: 900px;
}

@media (max-width: 900px) {
  main {
    padding: 1rem;
  }

  #main-section {
    margin: 1rem auto;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .drink-container {
    gap: 0.5rem;
  }

  .drink-container .btn {
    text-align: center;
    max-width: 100%;
  }
}

@media (max-width: 400px) {
  .btn {
    font-size: small;
    padding: 1rem 0.5rem;
  }
}