.grid-card {
  background: #eeeeee;
  box-shadow: 0px 2px 50px 0px #00000033;
}

.grid-card__container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-16);
  padding: var(--space-4);
  background: #eeeeee;
}

.grid-card__item {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.grid-card__item:hover {
  transform: translateY(-4px);
}

.grid-card__image {
  aspect-ratio: 16/9;
  overflow: hidden;
  height: 30em;
}

.grid-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.grid-card__content {
  padding: var(--space-4);
  position: relative;
  height: 12em;
}

.grid-card__title {
  font-size: var(--font-size-1-5xl);
  margin-bottom: var(--space-2);
  color: var(--primary-color);
  font-weight: 600;
  margin: 0 0 20px;
  line-height: 22px;
}

.grid-card__title a,
.grid-card__link{
  text-decoration: none !important;
}

.grid-card__subtitle {
  font-size: var(--font-size-xl);
  color: var(--back-one-color);
  margin-bottom: var(--space-4);
}

.grid-card__link {
  background-color: var(--primary-color);
  color: #fff;
  border: none;
  padding: 5px 20px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  border-radius: 5em;
  font-style: italic;
  transition: background-color 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5em;
  position: absolute;
  bottom: 0.5em;
  right: 0.5em;
}
.grid-card__link:hover {
  background-color: var(--white-color);
  color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* Responsive */
@media (max-width: 1200px) {
  .grid-card__container {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .grid-card__container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .grid-card, .grid-card__container {
    background: transparent;
    box-shadow: none;
  }
  .grid-card__item {
    width: 230px;
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  .grid-card__container {
    grid-template-columns: 1fr;
  }
}