.event-section {
  display: flex;
  flex-direction: column;
}

.event-section h3 {
  color: #fff;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  font-size: 24px;
  font-style: italic;
  font-weight: 900;
  line-height: normal;
}

.event-section p {
  color: #fff;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin-bottom: 0px;
}

.event-card {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 32px;
  padding: 32px;
  margin: 18px;
  background: linear-gradient(237deg, #59ffb9 -30.09%, #326cff 71.21%);
}

.event-card:hover {
  background: linear-gradient(99deg, #59ffb9 -12.36%, #326cff 54.36%);
}

.event-map-card {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 32px;
  padding: 32px;
  margin: 18px;
  background: linear-gradient(237deg, #59ffb9 -30.09%, #326cff 71.21%);
}

.event-map-card:hover {
  background: linear-gradient(157deg, #59ffb9 -34.83%, #326cff 84.53%);
}

.event-special {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 32px;
  padding: 32px;
  margin: 18px;
  background: linear-gradient(237deg, #59ffb9 -30.09%, #326cff 71.21%);
}

.event-special:hover {
  background: linear-gradient(103deg, #59ffb9 -19.2%, #326cff 57.41%);
}

.event-special-img-container {
  border-radius: 24px;
  width: 100%;
  height: 178px;
  position: relative;
  overflow: hidden;
}

.event-special-img-container img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 768px) {
  .event-special-img-container {
    width: 200px;
    height: auto;
    max-width: 178px;
    max-height: 178px;
  }

  .event-special-img-container img {
    position: absolute;
    width: 178px;
    height: 178px;
    max-width: 178px;
    max-height: 178px;
    object-fit: cover;
  }

  .event-section {
    flex-direction: row;
    padding-left: 123px;
    padding-right: 123px;
    padding-bottom: 50px;
  }

  .event-special {
    flex-direction: row;
  }
}