<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />
<link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />
<title>CodePen - Job Card spacing</title>
<link href="https://fonts.googleapis.com/css?family=Muli:300,400,600,700" rel="stylesheet">
<style>
@supports (--css: variables) {
:root {
--space: 12px;
--space-s: calc(var(--space) / 2);
--space-xs: calc(var(--space-s) / 2);
--space-l: calc(var(--space) * 2);
--space-xl: calc(var(--space-l) * 2);
--space-: -12px;
--space-s-: calc(var(--space-) / 2);
--space-xs-: calc(var(--space-s-) / 2);
--space-l-: calc(var(--space-) * 2);
--space-xl-: calc(var(--space-l-) * 2);
--card-gaps: 0;
--card-shadow-grow: 0;
--card-shadow-opac: 0;
}
.db {
--candi: #0c4b85;
--hirer: #0e7e8b;
--cta: #ff9000;
}
