body {
      font-family: Arial, sans-serif;
      background: #f9f9f9;
    }

    .container {
      width: 500px;
      margin: 60px auto;
      background: #1a1a1a;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
      overflow: hidden;
      padding: 12px;
      text-align: center;
	  display: inline-table;
	  margin: 20px;
	  transition: all 0.2s ease;
    }
	
    .container:hover {
      width: 500px;
      margin: 60px auto;
      background: #383838;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
      overflow: hidden;
      padding: 12px;
      text-align: center;
	  display: inline-table;
	  margin: 20px;
      transform: scale(1.02);
	  transition: all 0.2s ease;
    }

    .image {
      width: 100%;
      border-radius: 8px;
      cursor: pointer;
    }

    .info-box {
      overflow: hidden;
      height: 0;
      opacity: 0;
      transition: height 0.4s ease, opacity 0.3s ease;
      text-align: left;
      margin-top: 8px;
      padding: 0 6px;
    }

    .info-box.open {
      opacity: 1;
    }

    .title {
      font-weight: bold;
      margin-bottom: 4px;
      font-size: 32px;
      color: #9146C1;
    }

    .description {
      font-size: 18px;
      color: #fdfdff;
      line-height: 1.4;
	  font-weight: 100;
    }