- 
  const data = [
    { 
      title: 'Category A',
      description: 'Motorcycles',
      image: 'https://i.ibb.co/zXmHzBk/category-a.png',
      checked: false,
      disabled: false
    },
    { 
      title: 'Category B',
      description: 'Cars and ATVs',
      image: 'https://i.ibb.co/cXjw2Gz/category-b.png',
      checked: fasle,
      disabled: fasle
    },
    { 
      title: 'Category C',
      description: 'Large goods vehicle',
      image: 'https://i.ibb.co/nDbfH9B/category-c.png',
      checked: false,
      disabled: false
    },
    { 
      title: 'Category D',
      description: 'Buses',
      image: 'https://i.ibb.co/7gSQMmm/category-d.png',
      checked: false,
      disabled: false
    },
    { 
      title: 'Category T',
      description: 'Tractors and SMV',
      image: 'https://i.ibb.co/0F3SdsX/category-t.png',
      checked: false,
      disabled: false
    },
    { 
      title: 'Other',
      description: 'Additional categories',
      image: 'https://i.ibb.co/WDwmPy5/other.png',
      checked: false,
      disabled: true
    }
  ]

.grid
  each d in data
    label.card
      input.card__input(
        type='checkbox' 
        checked=d.checked 
        disabled=d.disabled
      )
      .card__body
        .card__body-cover
          img.card__body-cover-image(src=d.image)
          span.card__body-cover-checkbox 
            svg.card__body-cover-checkbox--svg(viewBox='0 0 12 10')
              polyline(points='1.5 6 4.5 9 10.5 1')
        header.card__body-header
          h2.card__body-header-title=d.title
          p.card__body-header-subtitle=d.description
//- twitter - dribbble
.socials
  a.twitter(href='https://twitter.com/fireblader_me' target='_blank')
    svg(viewBox='0 0 72 72')
      path(d='M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z')
  a.dribbble(href='https://dribbble.com/fireblader' target='_blank')
    img(src='https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg')

.card {
  --background: #fff;
  --background-checkbox: #0082ff;
  --background-image: #fff, #{rgba(#006baf, 0.2)};
  --text-color: #666;
  --text-headline: #000;
  --card-shadow: #0082ff;
  --card-height: 190px;
  --card-width: 190px;
  --card-radius: 12px;
  --header-height: 47px;
  --blend-mode: overlay;
  --transition: 0.15s;
  user-select: none;

  &:nth-child(odd) {
    .card__body-cover-image {
      --x-y1: 100% 90%;
      --x-y2: 67% 83%;
      --x-y3: 33% 90%;
      --x-y4: 0% 85%;
    }
  }

  &:nth-child(even) {
    .card__body-cover-image {
      --x-y1: 100% 85%;
      --x-y2: 73% 93%;
      --x-y3: 25% 85%;
      --x-y4: 0% 90%;
    }
  }

  &__input {
    position: absolute;
    display: block;
    outline: none;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    -webkit-appearance: none;

    &:checked {
      & ~ .card__body {
        --shadow: 0 0 0 3px var(--card-shadow);
        .card__body {
          &-cover-checkbox {
            --check-bg: var(--background-checkbox);
            --check-border: #fff;
            --check-scale: 1;
            --check-opacity: 1;
            &--svg {
              --stroke-color: #fff;
              --stroke-dashoffset: 0;
            }
          }
          &-cover {
            &:after {
              --opacity-bg: 0;
            }
            &-image {
              --filter-bg: grayscale(0);
            }
          }
        }
      }
    }

    &:disabled {
      & ~ .card__body {
        cursor: not-allowed;
        opacity: 0.5;
        &:active {
          --scale: 1;
        }
      }
    }
  }

  &__body {
    display: grid;
    grid-auto-rows: calc(var(--card-height) - var(--header-height)) auto;
    background: var(--background);
    height: var(--card-height);
    width: var(--card-width);
    border-radius: var(--card-radius);
    overflow: hidden;
    position: relative;
    cursor: pointer;
    box-shadow: var(--shadow, 0 4px 4px 0 rgba(0, 0, 0, 0.02));
    transition: transform var(--transition), box-shadow var(--transition);
    transform: scale(var(--scale, 1)) translateZ(0);
    &:active {
      --scale: 0.96;
    }

    &-cover {
      --c-border: var(--card-radius) var(--card-radius) 0 0;
      --c-width: 100%;
      --c-height: 100%;
      position: relative;
      overflow: hidden;
      &:after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: var(--c-width);
        height: var(--c-height);
        border-radius: var(--c-border);
        background: linear-gradient(to bottom right, var(--background-image));
        mix-blend-mode: var(--blend-mode);
        opacity: var(--opacity-bg, 1);
        transition: opacity var(--transition) linear;
      }
      &-image {
        width: var(--c-width);
        height: var(--c-height);
        object-fit: cover;
        border-radius: var(--c-border);
        filter: var(--filter-bg, grayscale(1));
        // transition: filter var(--transition) linear; // not working properly in Chrome
        clip-path: polygon(
          0% 0%,
          100% 0%,
          var(--x-y1, 100% 90%),
          var(--x-y2, 67% 83%),
          var(--x-y3, 33% 90%),
          var(--x-y4, 0% 85%)
        );
      }
      &-checkbox {
        background: var(--check-bg, var(--background-checkbox));
        border: 2px solid var(--check-border, #fff);
        position: absolute;
        right: 10px;
        top: 10px;
        z-index: 1;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        opacity: var(--check-opacity, 0);
        transition: transform var(--transition),
          opacity calc(var(--transition) * 1.2) linear,
          -webkit-transform var(--transition) ease;
        transform: scale(var(--check-scale, 0));
        &--svg {
          width: 13px;
          height: 11px;
          display: inline-block;
          vertical-align: top;
          fill: none;
          margin: 7px 0 0 5px;
          stroke: var(--stroke-color, #fff);
          stroke-width: 2;
          stroke-linecap: round;
          stroke-linejoin: round;
          stroke-dasharray: 16px;
          stroke-dashoffset: var(--stroke-dashoffset, 16px);
          transition: stroke-dashoffset 0.4s ease var(--transition);
        }
      }
    }

    &-header {
      height: var(--header-height);
      background: var(--background);
      padding: 0 10px 10px 10px;
      &-title {
        color: var(--text-headline);
        font-weight: 700;
        margin-bottom: 8px;
      }
      &-subtitle {
        color: var(--text-color);
        font-weight: 500;
        font-size: 13px;
      }
    }
  }
}

html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: inherit;

  &:after {
    box-sizing: inherit;
  }
}

// basic & twitter, dribbble
body {
  min-height: 100vh;
  display: flex;
  font-family: "Inter", Arial;
  justify-content: center;
  align-items: center;
  background: #fafafa;
  color: #000;
  .socials {
    position: fixed;
    display: flex;
    right: 20px;
    bottom: 20px;
    > a {
      display: block;
      height: 28px;
      margin-left: 15px;
      &.dribbble img {
        height: 28px;
      }
      &.twitter svg {
        width: 32px;
        height: 32px;
        fill: #1da1f2;
      }
    }
  }
  .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1rem;
  }
}