/* Basic styles for MF Related Elementor widget
 * All comments in English as requested.
 */
.mf-related-el { 
  margin-top: 16px;
  margin-bottom: 50px; 
}
.mf-related-head { margin-bottom: 10px; }
.mf-related-heading {
  margin: 0 0 6px;
  font-size: 1.125rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.mf-related-underline {
  display: inline-block;
  width: 60px;
  height: 3px;
  background: #f39c12; /* orange accent similar to screenshot */
}

/* Responsive CSS grid using data attributes for columns */
.mf-related-grid {
  display: grid;
  gap: 16px;
}
@media (min-width:1025px){
  .mf-related-grid { grid-template-columns: repeat(var(--cols-d,3), 1fr); }
}
@media (min-width:641px) and (max-width:1024px){
  .mf-related-grid { grid-template-columns: repeat(var(--cols-t,2), 1fr); }
}
@media (max-width:640px){
  .mf-related-grid { grid-template-columns: repeat(var(--cols-m,1), 1fr); }
}

/* Set CSS variables from data attributes via attribute selectors */
.mf-related-grid[data-cols-d] { --cols-d: attr(data-cols-d number); }
.mf-related-grid[data-cols-t] { --cols-t: attr(data-cols-t number); }
.mf-related-grid[data-cols-m] { --cols-m: attr(data-cols-m number); }

.mf-related-item { background:#fff; }
.mf-related-thumb {
  position: relative;
  display:block;
  width: 100%;
  overflow: hidden;
  background: #f5f5f5;
  border-radius: 4px;
}
.mf-related-thumb img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Aspect ratios */
.mf-related-thumb.ratio-16x9 { aspect-ratio: 16/9; }
.mf-related-thumb.ratio-4x3  { aspect-ratio: 4/3; }
.mf-related-thumb.ratio-1x1  { aspect-ratio: 1/1; }

.mf-related-title {
  margin: 8px 0 0;
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 600;
}
.mf-related-title a {
  color: inherit;
  text-decoration: none;
}
.mf-related-title a:hover { text-decoration: underline; }