#cname {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 25px;
    line-height: 1.5;
    margin-left: 20px;
    padding-top: 50px;
}

.slogan {
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: rgb(100, 85, 126);
    font-size: 1.5rem;
    text-align: center;
    text-decoration: none;
}

.column {
    width: 100vw;
    max-width: 1150px;
    margin: 0 3rem;
    display: flex;
    flex-wrap: wrap;
    /*justify-content: space-between;*/
    justify-content: center;
    align-items: center;
    align-content: center;
    padding: 0.5rem;
  }
  
.col {
    margin: 2.5rem;
    flex: 1 1 calc(20% - 2.5rem);
    box-sizing: border-box;
    max-width: 250px;
}
  
.col img {
  width: 100%;
  max-width: 100%;
  object-fit: cover;
}

.col a {
  text-decoration: none;
  color: #444141;
}

.col a:hover,
.col a:active {
  color: #807c7c;
}

.teename {
  margin-top: 1rem;
  text-align: center;
  font-size: 1.1rem;
}

.price {
  font-size: 1rem;
  margin-top: 0.5rem;
  text-align: center;
  color: #807c7c;
}

.col img:hover,
.col img:active {
  transform: scale(1.1);
  background-color: #ffffff;
}

.btn_cart {
  margin-top: .5rem;
  padding: .5rem;
  border: 2px solid #7958ac;
  border-radius: 10px;
  background-color: transparent;
  cursor: pointer;
}

.btn_cart:hover {
  background-color: #6c49a1;
  color: white;
}

/* Media Query for medium screens (tablets) */
@media (max-width: 992px) {
    .column {
      width: 95%; 
      padding: 10px;
    }

    .col {
      flex: 0 1 calc(30% - 20px);
      max-width: 100%;
    }

    .col img {
      width: 100%;
      max-width: 100%;
      height: auto;
      max-height: 330px;
    }
}

/* Media Query for medium screens (between tablet & phone) */
@media (max-width: 768px) {
  .column {
      width: 95%; 
      max-width: 750px; 
      padding: 5px;
  }

  .col {
      flex: 0 1 calc(50% - 20px); 
      max-width: 100%;
      margin-bottom: 20px; 
  }

  .col img {
      width: 100%; 
      height: auto; 
      max-height: 400px; 
  }

  .col h2,
  .col h4 {
      text-align: center; 
  }
}

/* Media Query for small screens (mobile) */
@media (max-width: 500px) {

  .slogan {
    font-size: 1.2rem;
  }

  .column {
    width: 95%; 
    max-width: 750px; 
    padding: 5px;
    }

  .col {
      flex: 0 1 calc(50% - 20px); 
      max-width: 100%;
      margin-bottom: 20px; 
  }

  .col img {
      width: 100%; 
      height: auto; 
      max-height: 400px; 
  }

  .col h2,
  .col h4 {
      text-align: center; 
  }
}