<template>
  <v-sheet
    border="lg opacity-12"
    class="text-body-medium mx-auto"
    max-width="550"
  >
    <v-container fluid>
      <v-row>
        <v-col cols="12" md="3">
          <v-img height="88" src="https://cdn.vuetifyjs.com/docs/images/graphics/img-placeholder.png" cover></v-img>
        </v-col>

        <v-col cols="12" md="9">
          <p class="mb-4">
            This is part of our <a href="#">Most Comprehensive Guide to Referral Programs</a> > <a href="#">Do I Need A Referral Program?</a> section. You may enjoy other related articles:
          </p>

          <ul class="ps-4 mb-6">
            <li>
              <a href="#">5 Ways to See if Referral Programs Can Work for You</a>
            </li>
            <li>
              <a href="#">The 6 Key Benefits of Referral Marketing</a>
            </li>
            <li>
              <a href="#">Leading Indicators of Referral Program Success</a>
            </li>
            <li>
              <a href="#">Debunking the Top 5 Worst Referral Program Myths</a>
            </li>
          </ul>

          <v-btn
            class="text-none"
            color="info"
            rounded="0"
            variant="flat"
            block
          >
            <span class="hidden-sm-and-down">
              Explore our 38+ Referral Program Resources
            </span>

            <span class="hidden-md-and-up">
              Explore Referral Resources
            </span>
          </v-btn>
        </v-col>
      </v-row>
    </v-container>
  </v-sheet>
</template>
