/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */
.wp-block-d3-security-tiles-carousel {
  --grid-gap: 30px;
  --item-count: 4;
  --item-visible-count: 2;
  --item-width: 400px;
  margin: 3em 0;
}
.wp-block-d3-security-tiles-carousel .tiles-carousel-items-wrapper {
  width: calc(var(--item-width) * var(--item-count) + var(--grid-gap) * var(--item-count));
  transition: all 0.4s;
  z-index: 1;
  position: relative;
}
.wp-block-d3-security-tiles-carousel .tiles-carousel-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, var(--item-width)));
  justify-content: flex-start;
  gap: var(--grid-gap);
}
.wp-block-d3-security-tiles-carousel .tiles-carousel-wrapper {
  margin: 3em auto 4em;
  overflow: hidden;
  padding-top: 4em;
  width: calc(var(--item-width) * var(--item-visible-count) + var(--grid-gap) * (var(--item-visible-count) - 1));
}
.wp-block-d3-security-tiles-carousel .tiles-carousel-nav-wrapper {
  width: calc(var(--item-width) * var(--item-visible-count) + var(--grid-gap) * (var(--item-visible-count) - 1));
  position: absolute;
  top: 0;
  height: 100%;
}
.wp-block-d3-security-tiles-carousel .tiles-carousel-nav {
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: -4em;
  width: 30px;
  height: 30px;
  border-style: solid;
  border-width: 0 8px 8px 0;
  border-color: var(--wp--preset--color--white);
  transform: rotate(135deg) translateY(-50%);
  transition: all 0.4s;
}
.wp-block-d3-security-tiles-carousel .tiles-carousel-nav:hover {
  border-color: var(--wp--preset--color--purple);
}
.wp-block-d3-security-tiles-carousel .tiles-carousel-nav.next {
  left: auto;
  right: -2.5em;
  transform: rotate(-45deg) translateY(19px);
}
@media (max-width: 990px) {
  .wp-block-d3-security-tiles-carousel {
    --item-width: 350px;
  }
}
@media (max-width: 860px) {
  .wp-block-d3-security-tiles-carousel {
    --item-visible-count: 1;
  }
}
@media (max-width: 600px) {
  .wp-block-d3-security-tiles-carousel {
    --item-width: 280px;
  }
  .wp-block-d3-security-tiles-carousel .tiles-carousel-nav {
    width: 20px;
    height: 20px;
    left: -2.5em;
  }
  .wp-block-d3-security-tiles-carousel .tiles-carousel-nav.next {
    right: -1.2em;
    transform: rotate(-45deg) translateY(12px);
  }
}