.media-section{padding:40px 20px;max-width:1200px;margin:auto}.media-header{margin-right:28px;text-align:center;margin-bottom:40px}.media-header h1{font-size:2.5rem;font-weight:700;color:#111}.media-header p{color:#666;margin-top:10px;max-width:600px;margin-inline:auto;font-size:1rem}.media-filters{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-bottom:40px}.filter-button{padding:10px 20px;border:1px solid #ccc;background:#fff;border-radius:999px;cursor:pointer;transition:all .2s ease-in-out;font-size:.95rem}.filter-button.active,.filter-button:hover{background-color:#000;color:#fff;border-color:#000}.media-grid{height:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:30px}.media-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 10px 25px #0000000d;transition:.3s ease-in-out}.media-card:hover{box-shadow:0 12px 30px #0000001a;transform:translateY(-4px)}.media-card img{width:100%;height:300px;object-fit:cover}.media-info{padding:16px}.media-info h3{font-size:1.1rem;margin-bottom:4px;font-weight:600}.media-info p{color:#666;font-size:.9rem}.media-card{transition:all .3s ease-in-out}
.modals {
  display: none; 
  position: fixed; 
  z-index: 1000; 
  padding-top: 60px; 
  left: 0;
  top: 0;
  width: 100%;
  height: 100%; 
  overflow: auto; 
  background-color: rgba(0,0,0,0.8);
}

.modal-contents {
  margin: auto;
  display: block;
  max-width: 90%;
  max-height: 80%;
}

.closes {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}