/*=============== CARD ===============*/
.container {
   margin-inline: 1.5rem;
   padding-block: 5rem;

   &__title{
      font-size: var(--h1-font-size);
      text-align: center;
      color: var(--title-color);
      margin-bottom: 3rem;
   }
}

.card{
   &__container{
      display: grid;
      grid-template-columns: 1fr;
      justify-content: center;      
      gap: 2rem;
   }
   &__product{
      background-color: var(--body-color);
      border: 4px solid var(--first-color);
      padding-block: 1.25rem;
      text-align: center;
      display: grid;
      row-gap: 1.5rem;
      cursor: pointer;
   }
   &__img{
      width: 200px;
      justify-self: center;
      filter: drop-shadow(0 8px 16px hsla(5, 90%, 4%, .2));
      transition: transform .3s;
   }
   &__name{
      font-size: var(--h2-font-size);
      color: var(--title-color);
      margin-bottom: .5rem;
   }
   &__price{
      font-size: var(--h2-font-size);
      font-weight: var(--font-semi-bold);
      color: var(--title-color);
   }
   &__product:hover &__img{
      transform: scale(1.1);
   }
}

/*=============== POPUP MODAL ===============*/
.modal{
   position: fixed;
   inset: 0;
   background-color: hsla(5, 90%, 4%, .2);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(24px);
   display: grid;
   place-items: center;
   padding: 2rem 1.5rem;
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   z-index: var(--z-modal);
   transition: opacity .4s, visibility .4s;

   &__card{
      position: relative;
      background-color: var(--body-color);
      padding: 3rem 1.25rem 2rem;
      display: grid;
      row-gap: 1.5rem;
      text-align: center;
      transform: rotateX(90deg);
      transition: transform .6s;
   }
   &__close{
      position: absolute;
      top: 1.5rem;
      right: 1.5rem;
      font-size: 1.5rem;
      color: var(--title-color);
      cursor: pointer;
   }
   &__img{
      width: 220px;
      justify-self: center;
      filter: drop-shadow(0 8px 16px hsla(5, 90%, 4%, .2));
   }
   &__name{
      font-size: var(--h2-font-size);
      color: var(--title-color);
      margin-bottom: .5rem;
   }
   &__info{
      margin-bottom: 1rem;
   }
   &__price{
      font-size: var(--h2-font-size);
      font-weight: var(--font-semi-bold);
      color: var(--first-color);
   }
   &__buttons{
      display: flex;
      gap: .5rem;
   }
   &__button{
      flex-grow: 1;
      outline: none;
      border: none;
      background-color: var(--first-color);
      padding-block: 1rem;
      color: var(--white-color);
      font: var(--font-semi-bold) var(--normal-font-size) var(--body-font);
      cursor: pointer;
      transition: background-color .4s;

      &:hover{
         background-color: var(--first-color-alt);
      }

      &-ghost{
         background-color: var(--body-color);
         color: var(--title-color);
         border: 3px solid var(--first-color);

         &:hover{
            background-color: var(--body-color);
         }
      }
   }
}

/* Active modal */
.active-modal {
   opacity: 1;
   visibility: visible;
   pointer-events: initial;
}

.active-modal .modal__card{
   transform: rotateX(0);
}
