@layer shell {
  #info-homepage {
    --neutral-black: #000000;
    --neutral-dark: #404040;
    --neutral-light: #d4d4d4;
    --neutral-lighterst: #f5f5f5;
    --neutral-white: #ffffff;
    --neutral-darker: #262626;

    padding-block: 40px;

    .title {
      font-size: 1.75rem;
      color: var(--neutral-darker);
      font-weight: 600;
      margin-block-end: 20px;
      text-align: center;
    }

    .card-container {
      display: flex;
      gap: 16px;
      user-select: none;
      flex-wrap: wrap;
      justify-content: center;


      .card-box {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 16px;

        width: 396px;
        padding: 16px;
        border: 1px solid var(--neutral-light);
        border-radius: 8px;
        background-color: var(--neutral-white);

        .title-box {
          font-size: 1.25rem;
          color: var(--neutral-darker);
          font-weight: 600;
          margin-block: 4px;
        }

        .description {
          font-size: 0.875rem;
          color: var(--neutral-dark);
        }
      }
    }
  }
}