/* Copied and simplified style for the app */
body {
    font-family: "Tahoma", sans-serif;
    background: #f4f4f4;
    padding: 20px;
    text-align: center;
}

.title {
    font-size: 32px;
    color: #1d4e89;
    margin-bottom: 10px;
}

.container { max-width: 1200px; margin: auto; }

.card { background: white; width: 300px; padding: 15px; border-radius: 10px; border: 2px solid #1d4e89; display:inline-block; vertical-align:top; margin:10px }
.top-img { width: 100%; height: auto; object-fit: cover; border-radius: 8px; margin-bottom: 10px; }
.level-title { background: #1d4e89; color: white; padding: 10px; border-radius: 6px; margin-bottom: 15px; }
.lesson h3 { background: #dce9f7; color: #1d4e89; padding: 8px; border-radius: 6px; }
button { width: 100%; background: #eef6ff; color: #1d4e89; border: 1px solid #1d4e89; padding: 10px; border-radius: 6px; margin: 6px 0; cursor: pointer; font-size: 15px; }

/* single view */
.single-container .card { width: 100%; max-width: 1200px; }

@media (min-width:1000px){
  .single-container .card { display:flex; align-items:center; gap:24px; padding:20px }
  .single-container .card .top-img { flex:0 0 30%; width:30%; }
}