.grid-box{
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: calc(100dvh - 120px);
    background-image:url('../images/newspaper.png');
    background-position: center;
    background-size: cover ;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 0fr)); /* Use 1fr to allow flexibility */
  gap: 60px;
  width: 70vw;
  height: 90%;
  margin: 5vw;
  justify-content: center; /* Centers the grid items horizontally */
  align-content: center;   /* Centers the grid items vertically */
}

.card {
    background-color: white;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    width: 350px;
    height: 450px;
}

.card img {
    width: 100%;
    height: 100%;
}

.card:hover {
    transform: scale(1.05);

}

.card:active {
    transform: translateY(4px);
}

.loader {
  display: none;
  font-size: 15em;
  color: var(--primary-color); /* Use your desired color variable */
  font-family: 'Bangers', cursive; /* Font style */
  animation: flash 3s linear infinite; /* Flashing animation */
  position: absolute; /* Absolute positioning */
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Offset by half the element's size */
}

@keyframes flash {
  0%, 50%, 100% {
      opacity: 1; /* Full opacity */
  }
  25%, 75% {
      opacity: 0.5; /* Half opacity */
  }
}

.loading {
    display: block;
}





@media screen and (min-width: 10in) and (max-width: 17in) {

  .grid-box{
    font-family: 'Arial', sans-serif;
    margin: 0;
    margin-top: 90px;
    margin-bottom: 60px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: calc(100dvh - 90px);
    background-image:url('../images/newspaper.png');
    background-position: center;
    background-size: cover ;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 0fr)); /* Use 1fr to allow flexibility */
  gap: 40px;
  width: 70vw;
  height: 90%;
  margin: 5vw;
  justify-content: center; /* Centers the grid items horizontally */
  align-content: center;   /* Centers the grid items vertically */
}

.card {
  background-color: white;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  width: 250px;
  height: 350px;
}

  .loader {
    font-size: 10em;
    color: var(--primary-color); /* Use your desired color variable */
    font-family: 'Bangers', cursive; /* Font style */
    animation: flash 3s linear infinite; /* Flashing animation */
    position: absolute; /* Absolute positioning */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Offset by half the element's size */
  }
  

}






@media screen and (min-width: 6in) and (max-width: 10in) {



  .loader {
    font-size: 10em;
    color: var(--primary-color); /* Use your desired color variable */
    font-family: 'Bangers', cursive; /* Font style */
    animation: flash 3s linear infinite; /* Flashing animation */
    position: absolute; /* Absolute positioning */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Offset by half the element's size */
  }
  
  .grid-box{
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: calc(100dvh - 90px);
    background-image:url('../images/newspaper.png');
    background-position: center;
    background-size: cover ;
  }
  
  .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 0fr)); /* Use 1fr to allow flexibility */
  gap: 40px;
  width: 70vw;
  height: 90%;
  margin: 8vw;
  justify-content: center; /* Centers the grid items horizontally */
  align-content: center;   /* Centers the grid items vertically */
  }
  
  .card {
  background-color: white;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  width: 250px;
  height: 350px;
  }
  

}









@media screen and (min-width: 0in) and (max-width: 5in) {



  .loader {
    font-size: 6em;
    color: var(--primary-color); /* Use your desired color variable */
    font-family: 'Bangers', cursive; /* Font style */
    animation: flash 3s linear infinite; /* Flashing animation */
    position: absolute; /* Absolute positioning */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Offset by half the element's size */
  }
  

  .grid-box{
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: calc(100dvh - 80px);
    background-image:url('../images/newspaper.png');
    background-position: center;
    background-size: cover ;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 0fr)); /* Use 1fr to allow flexibility */
  gap: 30px;
  width: 70vw;
  height: 90%;
  margin: 10vw;
  justify-content: center; /* Centers the grid items horizontally */
  align-content: center;   /* Centers the grid items vertically */
}

.card {
  background-color: white;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  width: 250px;
  height: 350px;
}


}