@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');

:root {
  --header-font: "Barlow Condensed", serif;
  --header-color: var(--primary-color);
  --subheader-font: "Roboto Slab", serif;
  --subheader-color: var(--primary-color);
  --paragraph-font: 300 18px / 1.7 "Source Sans 3";
}

.headerblock .image-block-title, .headerblock .image-block-description {
  justify-content: flex-end !important;

  font-family: var(--header-font);
  font-weight: 700 !important;
  font-style: normal;
  font-size: 80px !important;
  color: #ffffff;
  margin: 0 auto;
}

.perksbanner {
  padding: 0 20px !important;
  margin-top: 200px !important;
  background-size: auto !important;
  background-repeat: no-repeat;
  background-position-y: bottom;
  background-position-x: right;
}

.perksbanner > div {
  gap: 50px !important;
  flex-wrap: wrap;
  justify-content: center;
}

.perksbanner > div > div {
  background-color: #f8f8f8;
  border-radius: 20px;
  padding: 10px 10px 20px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 17px 14px 6px -7px rgba(0,0,0,0.41);
  min-width: 300px;
  max-width: 400px;
  margin-bottom: 300px;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

.perksbanner > div > div::before {
  content: "";
  position: absolute;
  top: -95px;
  left: 6px;
  width: 97%;
  height: 100px;
  background-color: #F8F8F8FF;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

.perksbanner a {
  background-color: transparent !important;
  color: black !important;
  font-weight: bolder;
}

.perksbanner a:hover {
  font-weight: bold;
}

@media (max-width: 768px) {
  .perksbanner {
    background-repeat: repeat-y;
  }

  .perksbanner > div > div {
    margin-bottom: 100px;
  }
}