/* General styles for the grid */
.courses-style {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
  box-sizing: border-box;
  justify-content: flex-start; /* Ensures proper spacing */
}

/* Styling for individual items (views-row) */
.courses-style .views-row {
  flex: 1 1 calc(33.333% - 20px); /* 3 columns with gap adjustment */
  max-width: calc(33.333% - 20px); /* Ensures consistent width */
  padding: 20px; /* Added padding */
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

/* Hover effect for views-row */
.courses-style .views-row:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Image styling */
.courses-style .views-row img {
  width: 100%;
  height: auto;
  display: block;
  border-bottom: 1px solid #ddd;
}

/* Title styling */
.courses-style .views-field-field-nombre-del-curso a, .courses-style .views-field-title a {
  display: block;

  font-weight: bold;
  color: #0088cc; /* Applied new color */
  text-decoration: none;
  margin-bottom: 10px; /* Add spacing between title and content */
}

.courses-style .views-field-field-nombre-del-curso a:hover, .courses-style .views-field-title a:hover {
  color: #005f99; /* Slightly darker shade on hover for better contrast */
}

/* Type of course styling */
.courses-style .views-field-field-tipo-curso, .courses-style .views-field-field-webinar-categoria {
  font-size: 0.9em;
  color: #555;
  background-color: #f8f9fa;
  text-align: center;
  padding: 10px;
  border-radius: 4px; /* Slight rounding for the background */
}

/* Responsive design for medium screens */
@media (max-width: 992px) {
  .courses-style .views-row {
    flex: 1 1 calc(50% - 20px); /* 2 columns */
    max-width: calc(50% - 20px);
  }
}

/* Responsive design for small screens */
@media (max-width: 768px) {
  .courses-style .views-row {
    flex: 1 1 100%; /* 1 column */
    max-width: 100%;
  }
}