.destinationCards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  width: 100%;
  overflow: auto;
}
.destinationCard {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  border-radius: 10px;
  display: flex;
  align-items: flex-end;
  color: white;
}

.destinationCard::before {
  content: "";
  position: absolute;
  width: 100%;
  top: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
  z-index: 0;
  height: 100px;
}

.destinationCard:nth-child(1),
.destinationCard:nth-child(2) {
  grid-column: span 3;
}

.destinationCard:nth-child(3),
.destinationCard:nth-child(4),
.destinationCard:nth-child(5) {
  grid-column: span 2;
}

.destinationText {
  position: absolute;
  top: 5px;
  left: 5px;
  color: white;
  padding: 10px;
  border-radius: 5px;
}

@media screen and (min-width: 320px) and (max-width: 768px) {
  .destinationCard {
    height: 2 00px;
    width: 300px;
  }
  .destinationCard:nth-child(1),
  .destinationCard:nth-child(2) {
    grid-column: span 1;
  }

  .destinationCard:nth-child(3),
  .destinationCard:nth-child(4),
  .destinationCard:nth-child(5) {
    grid-column: span 1;
  }
}