.container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.grid-area-1,
.grid-area-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
  justify-content: center; /* Center align items horizontally */
  align-items: center; /* Center align items vertically */
}

.grid-item {
  background-color: #f2f2f2;
  padding: 10px;
  text-align: center;
  cursor: pointer;
}

.grid-cars a{
  background-color: #f2f2f2;
  padding: 10px;
}

.grid-cars a:hover{
background: #B3FFAB;  /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #12FFF7, #B3FFAB);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #12FFF7, #B3FFAB); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.grid-cars img{
  max-width: 100%;
}

.modal img{
  max-width: 100%;
}

.cars-style h4{
  text-align: center;
  color: black;
    margin-bottom: 30px;
    text-align: center;  
}

.cars-style h4{
  text-align: center;
  color: black;
  margin-bottom: 20px;
  text-align: center; 
}

.cars-style h2{
  text-align: center;
  margin-bottom: 30px;
  text-align: center; 
  line-height: 1.5;
}

.modal-container {
  position: relative;
}

.modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -32%);
  background-color: white;
  padding: 20px;
  z-index: 1000;
  overflow-y: scroll;
}

.close-btn {
  background-color: orange;
  padding: 10px;	
  display: block;
  margin-top: 10px;
  text-align: center;
  color: black;
  border-color: black;
}

/* Show modals when their corresponding anchor links are targeted */
.modal:target {
  display: block;
}