/* mixins >>>>>>> */
/* *** colour.scss *** */
.bkgrd-fde7be {
  background-color: #fde7be;
}

/* *** core.scss *** */
/* *** colour.scss *** */
.bkgrd-fde7be {
  background-color: #fde7be;
}

/* *** responsive.scss *** */
.card {
  border: none;
}
.card-hdr {
  padding: 10px var(--gutter-size);
  color: #FFF;
  background-color: #C8102E;
}
.card-content,
.card .btn {
  padding: var(--gutter-size);
}
.card .card-img {
  display: none;
}

.cards > .card {
  display: inline-block;
  margin-left: 14px;
  margin-bottom: 20px;
  width: calc(33% - 11px);
  border: #000 solid 1px;
}
.cards > .card:nth-child(3n+1) {
  margin: 0;
}

.cards-two {
  display: grid;
  grid-template-columns: auto auto;
  grid-column-gap: 10px;
}
.cards-two > .card {
  display: inline-block;
  margin: 0;
  margin-bottom: 20px;
  min-height: 200px;
  border: #000 solid 1px;
}

.cards-two,
.cards-three,
.cards-four,
.cards-horiz {
  display: grid;
  grid-template-columns: auto;
  grid-column-gap: 10px;
}
.cards-two > .card,
.cards-three > .card,
.cards-four > .card,
.cards-horiz > .card {
  display: inline-block;
  margin: 0;
  margin-bottom: 20px;
  min-height: 200px;
}
.cards-two > .card.card-hide,
.cards-three > .card.card-hide,
.cards-four > .card.card-hide,
.cards-horiz > .card.card-hide {
  display: none;
}

.bkg-black {
  background-color: #000;
  padding: 0;
}

.card-hide {
  display: none;
}

.dark .card {
  background-color: #000;
}
.dark .card:not(.hdr) {
  border: #fff solid 1px;
}
.dark .card .card-title {
  border: #000 solid 1px;
}
.dark .card .card-img {
  text-align: center;
}
.dark .cards-three > .card {
  display: inline-block;
  margin: 0;
  padding: var(--gutter-size);
  margin-bottom: 20px;
  min-height: 200px;
}
.dark .card {
  background-color: #000;
}
.dark .card:not(.hdr) {
  border: #fff solid 1px;
  transition: border 120ms ease-in-out, border-radius 120ms ease-in-out;
}
.dark .card:hover:not(.hdr) {
  transition: border 320ms ease-in-out, border-radius 320ms ease-in-out;
  border-radius: 16px;
}
.dark .card-content p {
  font-size: 18px;
  color: #fff;
}
.dark .card-content h2 {
  color: #fff;
}
.dark .img-circle {
  width: 200px;
  height: 200px;
  border-radius: 100px;
}
.dark .img-square {
  width: 100%;
  max-width: 300px;
  border-radius: 32px;
}
.dark.card-btn .cards-three > .card {
  position: relative;
  padding-bottom: 70px;
}
.dark.card-btn .cards-three > .card .btn {
  position: absolute;
  bottom: 20px;
  width: calc(100% - var(--gutter-double));
}

.artl-type::after {
  position: absolute;
  top: -15px;
  right: 16px;
  z-index: 4;
  content: "";
  width: 15px;
  height: 15px;
  padding: 10px;
  border-radius: 16px;
}

.at-ada::after {
  content: "";
  background: url("../img/icons/60x60/accessibility_26629171-60x60.png") no-repeat center center/var(--icon-artl);
  background-color: blue;
}

.at-brand::after {
  background: url("../img/icons/60x60/brand_v50177226.png") no-repeat center center/var(--icon-artl);
  background-color: lightgreen;
}

.at-cms::after {
  background: url("../img/icons/60x60/cms_v25657213-60x60.png") no-repeat center center/var(--icon-artl);
  background-color: lightsalmon;
}

.at-design::after {
  background: url("../img/icons/60x60/cute-brush_v21894491-60x60.png") no-repeat center center/var(--icon-artl);
  background-color: lightcoral;
}

.at-seo::after {
  background: url("../img/icons/60x60/magnifying-glass_v10654958-60x60.png") no-repeat center center/var(--icon-artl);
  background-color: lightblue;
}

.img-square {
  max-width: 100%;
}

@media screen and (min-width: 576px) {
  .card .card-img {
    display: block;
  }
  .cards-four {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 10px;
  }
  .cards-four > .card {
    display: inline-block;
    position: relative;
    margin: 0 0 20px;
    padding: 0 0 90px;
    min-height: 200px;
  }
  .cards-four > .card:not(.hdr) {
    border: #000 solid 1px;
    transition: border 120ms ease-in-out, border-radius 120ms ease-in-out;
  }
  .cards-four > .card:hover:not(.hdr) {
    transition: border 320ms ease-in-out, border-radius 320ms ease-in-out;
    border-radius: 16px;
  }
  .cards-four > .card:not(.hdr) .img-square {
    border-radius: 0;
    transition: border-radius 120ms ease-in-out;
  }
  .cards-four > .card:hover:not(.hdr) .img-square {
    transition: border-radius 320ms ease-in-out;
    border-radius: 16px 16px 0 0;
  }
  .cards-four > .card .card-title {
    border: #000 solid 1px;
  }
  .cards-four > .card .card-img {
    text-align: center;
  }
  .cards-four > .card .img-square {
    max-width: 100%;
  }
  .cards-four > .card-hide {
    display: none;
  }
  .cards-four .btn {
    position: absolute;
    padding: 16px 8px;
    bottom: 0;
    width: 100%;
  }
  .cards-four .btn .btn-a {
    width: 100%;
    min-width: auto;
  }
  .cards-horiz .card {
    position: relative;
    margin-bottom: 32px;
    height: 102px;
    min-height: auto;
  }
  .cards-horiz .card .card-img {
    display: inline-block;
    width: 100px;
    height: 100px;
    float: left;
  }
  .cards-horiz .card .card-content {
    display: inline-block;
    vertical-align: top;
    padding: 0 16px;
    width: calc(100% - 110px);
  }
  .cards-horiz .card .card-content p {
    margin: 16px 0 0;
    padding: 0;
  }
  .cards-horiz .card-img {
    display: block;
  }
  .cards-horiz .img-square {
    width: 100%;
    max-width: 100%;
  }
  .cards-horiz .btn {
    display: inline-block;
    padding: 0 16px;
  }
  .cards-horiz .btn .btn-a {
    display: inline-block;
    margin: 0;
    padding: 0;
    min-width: auto;
    color: #000;
    background-color: transparent;
    border: none;
    border-color: transparent;
    text-align: center;
    text-decoration: none;
  }
  .cards-horiz .card {
    border: #000 solid 1px;
    transition: border 120ms ease-in-out, border-radius 120ms ease-in-out;
  }
  .cards-horiz .card .img-square {
    border-radius: 0;
    transition: border-radius 120ms ease-in-out;
  }
  .cards-horiz .card:hover {
    transition: border 320ms ease-in-out, border-radius 320ms ease-in-out;
    border-radius: 16px;
  }
  .cards-horiz .card:hover .img-square {
    transition: border-radius 320ms ease-in-out;
    border-radius: 16px 0 0 16px;
  }
  .card-hide {
    display: none;
  }
  .dark .card:not(.hdr) {
    border: #fff solid 1px;
  }
}
@media screen and (min-width: 576px) and (max-width: 767px) {
  .cards-horiz .card.at-mt8 .card-content p {
    margin-top: 8px;
  }
}
@media screen and (min-width: 768px) {
  .card {
    border: #000 solid 1px;
  }
  .bkg-black {
    padding: 40px 0 80px;
  }
  .cards-three {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 8px;
  }
  .cards-four {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 10px;
  }
}
@media screen and (min-width: 992px) {
  .bkg-black {
    padding: 80px 0;
  }
  .page-design .bkg-black {
    padding: 0 0 80px;
  }
  .cards-three {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 8px;
  }
  .cards-four {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 10px;
  }
}
@media screen and (min-width: 1200px) {
  .cards-three {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 10px;
  }
}/*# sourceMappingURL=cards.css.map */