:root {
  --black: black;
  --white: white;
}

.w-layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

body {
  color: #333;
  font-family: printf, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

.section {
  min-height: 100vh;
  justify-content: center;
  align-items: center;
  display: flex;
}

.section.black {
  background-color: var(--black);
  color: var(--white);
}

.grid {
  grid-column-gap: 50px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
}

.card {
  width: 480px;
  height: 310px;
  background-image: url('../images/king-of-caravans-Rolling-Stone.png');
  background-position: 0 0;
  background-size: 500px;
  border-radius: 15px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 70px 100px -35px rgba(0, 0, 0, .2);
}

.card-highlight {
  z-index: 99;
  width: 400px;
  height: 400px;
  opacity: .1;
  filter: blur(50px);
  background-image: linear-gradient(#fff, #fff);
  border-radius: 300px;
  display: block;
  position: absolute;
  top: 0;
}

.card-number {
  color: #fff;
  letter-spacing: 3px;
  font-family: Inconsolata, monospace;
  font-size: 18px;
  position: absolute;
  bottom: 40px;
  right: 40px;
}

.card-logo {
  width: 85px;
  position: absolute;
  top: 40px;
  left: 40px;
}

.container {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}

.image {
  background-color: var(--white);
}

.icomoon {
  margin-right: 10px;
  font-family: Icomoon, sans-serif;
}

.icomoon.link {
  font-size: 48px;
  line-height: 48px;
}

.link-ting {
  color: var(--black);
  align-items: center;
  margin-bottom: 20px;
  font-size: 30px;
  line-height: 30px;
  text-decoration: none;
  transition: transform .2s;
  display: flex;
}

.link-ting:hover {
  transform: scale(1.05);
}

.link-ting.white {
  color: var(--white);
}

.heading {
  border-bottom: 4px solid var(--white);
  margin-bottom: 20px;
  padding-bottom: 10px;
  font-size: 40px;
}

.heading.baclk {
  border-bottom-color: var(--black);
}

@media screen and (max-width: 991px) {
  .container {
    max-width: 728px;
  }
}

@media screen and (max-width: 767px) {
  .section {
    min-height: auto;
  }

  .grid {
    grid-template-columns: 1fr;
  }

  .card {
    width: 400px;
    height: 260px;
  }

  .div-block {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media screen and (max-width: 479px) {
  .card {
    width: 100%;
    height: 180px;
  }

  .card-highlight {
    width: 200px;
    height: 200px;
  }

  .card-number {
    font-size: 14px;
    bottom: 20px;
    right: 20px;
  }

  .card-logo {
    width: 60px;
    top: 20px;
    left: 20px;
  }
}

#w-node-e4ca34f5-3b16-a3fc-d711-30c6c151524e-e65a0a5f, #w-node-_5b6da9d1-f381-8b95-2ca1-08e3b3a1a8d6-e65a0a5f, #w-node-_8a93d5d1-346f-0aa6-c244-3e3365a8c70c-e65a0a5f, #w-node-_54834cea-70ad-33dc-578c-2fe03a6ef31f-e65a0a5f, #w-node-_7e91052f-0311-03a8-75a7-47cd40bca4e0-e65a0a5f, #w-node-_43077ad7-425f-eaae-b705-153167e6e785-e65a0a5f, #w-node-_25a4a8fe-32aa-d54b-4075-98a59d27bc89-e65a0a5f, #w-node-_7c231030-0d29-a17b-8669-1931357ba75c-e65a0a5f {
  align-self: center;
  justify-self: center;
}

@media screen and (max-width: 767px) {
  #w-node-e4ca34f5-3b16-a3fc-d711-30c6c1515266-e65a0a5f, #w-node-_8a93d5d1-346f-0aa6-c244-3e3365a8c71f-e65a0a5f, #w-node-_7e91052f-0311-03a8-75a7-47cd40bca4fa-e65a0a5f, #w-node-efebbbcb-1eb8-08c0-04b3-5694c20b8839-e65a0a5f {
    order: -9999;
  }
}


@font-face {
  font-family: 'Icomoon';
  src: url('../fonts/icomoon.eot') format('embedded-opentype'), url('../fonts/icomoon.woff') format('woff'), url('../fonts/icomoon.ttf') format('truetype'), url('../fonts/icomoon.svg') format('svg');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}