Answersheet to 'CSS Handles and the power of customizing blocks'

// minimum-boilerplate-theme/store/blocks/home.jsonc
{
  "store.home": {
    "blocks": ["rich-text", "info-card#clearance", "info-card#vintage"]
  },
  "rich-text": {
    "props": {
      "text": "VTEX Store Framework",
      "textAlignment": "CENTER",
      "textPosition": "CENTER",
      "font": "t-heading-1"
    }
  },
  "info-card#clearance": {
    "props": {
      "id": "info-card-clearance",
      "isFullModeStyle": false,
      "textPosition": "left",
      "imageUrl": "https://storecomponents.vteximg.com.br/arquivos/banner-infocard2.png",
      "headline": "Clearance Sale",
      "callToActionText": "DISCOVER",
      "callToActionUrl": "/sale/d",
      "textAlignment": "center"
    }
  },
  "info-card#vintage": {
    "props": {
      "id": "info-card-vintage",
      "isFullModeStyle": false,
      "textPosition": "right",
      "imageUrl": "https://appliancetheme.vteximg.com.br/arquivos/cozinha-rosa-min.png",
      "headline": "Vintage",
      "callToActionText": "DISCOVER",
      "callToActionUrl": "/sale/d",
      "textAlignment": "center",
      "blockClass": "vintage"
    }
  }
}

/* styles/css/vtex.store-components.css */
.infoCardHeadline {
  font-family: serif;
  font-size: 2.25rem;
  font-weight: bold;
  color: black;
  border: 2px solid black;
  padding: 24px;
}

.infoCardCallActionContainer :global(.vtex-button) {
  color: white;
  background-color: gray;
  border: transparent;
}

.infoCardCallActionContainer :global(.vtex-button):hover {
  color: gray;
  background-color: white;
  border: transparent;
}

.infoCardContainer--vintage {
  background-color: #edcfd1;
}

.infoCardContainer {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0;
}