@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');

:root {
    --pacific-blue: #00b2caff;
    --yale-blue: #1d4e89ff;
    --cameo-pink: #efbbcc;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    width: 100%;
    height: 100vh;
    font-family: 'Oswald', sans-serif;
}
section.products{
    padding: 2.5rem 0;
}
.title{
margin: auto;
width: 115px;
color: var(--yale-blue);
padding-bottom: 1.5rem;
}

hr{
    border-radius: 5px;
    background-color: var(--pacific-blue);
    border: 1px solid var(--pacific-blue);
}
.section-center{
    width: 90vw;
    margin: 0 auto;
    max-width: 1170px;
    display: grid;
    gap: 3rem 2rem;
    justify-items: center;
}
.photo{
    object-fit: cover;
    height: 160px;
    border: 0.25rem solid var(--pacific-blue);
    border-radius: 0.5rem;
    max-width: 110px;

}
.product {
    display: flex;
    justify-content: space-evenly;
    color: var(--yale-blue);
    max-width: 25rem;
    gap: 1rem 2rem;
  }
  .product-info{
    display: flex;
flex-direction: column;
justify-content: space-evenly;
  }
  .product header{
    display: flex;
justify-content: space-between;
}
  .price {
    color: var(--pacific-blue);
  }
  .product-text {
    margin-bottom: 0;
    text-align: justify;
  }

  .btn-container {
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
  }
  .filter-btn {
    background: transparent;
    border: 0.25rem solid var(--cameo-pink);
font-weight: bold; 
   margin: 0 0.5rem;
    border-radius: 0.5rem;
    padding: 0.5rem;
    color:var(--yale-blue);
    cursor: pointer;
    transition: all 0.3s linear;
  }
  .filter-btn:hover {
    background:  var(--yale-blue);
    color: var(--cameo-pink);
  }
  @media screen and (min-width: 1200px) {

    .section-center {
        width: 95vw;
        grid-template-columns: 1fr 1fr;
      }
      .product {
        grid-template-columns: 225px 1fr;
        gap: 0 1.25rem;
        max-width: 40rem;
      }
    }