:root{

    --bg: #f2f4f7;

    --card-bg: #ffffff;

    --text-dark: #14181f;

    --text-muted: #5c6474;

    --accent: #c0392b;

    --shadow: 0 20px 40px -20px rgba(20,24,31,0.18);

    --radius: 18px;

  }

  * { box-sizing: border-box; }

  body{

    margin:0;

    padding: 48px 24px;

    background: var(--bg);

    font-family: 'Segoe UI', Roboto, Arial, sans-serif;

    color: var(--text-dark);

  }

  .grid{

    display:grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 28px;

    max-width: 1200px;

    margin: 0 auto;

  }

  .card{

    background: var(--card-bg);

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    overflow:hidden;

    display:flex;

    flex-direction:column;

  }

  .card__media{

    position:relative;

    aspect-ratio: 4 / 3;

    overflow:hidden;

  }

  .card__media img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

  }

  .card__badge{

    position:absolute;

    top:16px;

    left:16px;

    background: rgba(255,255,255,0.92);

    padding:8px 16px;

    border-radius: 999px;

    font-size: 13px;

    font-weight:600;

    color: var(--text-dark);

  }

  .card__body{

    padding: 24px 24px 20px;

    display:flex;

    flex-direction:column;

    gap:10px;

    flex:1;

  }

  .card__title{

    font-size: 20px;

    font-weight:700;

    margin:0;

    line-height:1.3;

  }

  .card__desc{

    font-size: 15px;

    color: var(--text-muted);

    line-height:1.55;

    margin:0;

    flex:1;

  }

  .card__footer{

    display:flex;

    align-items:center;

    gap:8px;

    margin-top:8px;

    font-size: 14px;

    font-weight:600;

    color: var(--text-dark);

  }

  .card__footer svg{

    flex-shrink:0;

    color: var(--accent);

  }