/*!*************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/blocks/news-insights-multi-column/style.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************************/
:root {
  --color-primary: var(--wp--preset--color--primary);
  --color-secondary: var(--wp--preset--color--secondary);
  --color-text: var(--wp--preset--color--text);
  --color-text-dark: var(--wp--preset--color--text-dark);
  --color-accent: var(--wp--preset--color--accent);
  --color-gray: var(--wp--preset--color--gray);
  --color-white: var(--wp--preset--color--white);
  --color-black: var(--wp--preset--color--black);
  --color-body-bg: #f3f7fb;
  --color-black-two: #141419;
  --color-error: #CE202A;
  --color-success: #28a745;
  --gradient-primary: var(--wp--preset--gradient--primary);
  --gradient-secondary: var(--wp--preset--gradient--secondary);
  --fontBase: var(--wp--preset--font-family--primary);
  --fontSecondary: var(--wp--preset--font-family--secondary);
}

/*********************
* BREAKPOINTS
*
* @example
* for max-width case
* @include breakpoint('smaller') {
*	@content;	
* }
*
* for min-width case
* @include breakpoint('smaller', true) {
*	@content;	
*}
*********************/

/*********************
	Flex 
*********************/

/*********************
	Flex Direction

@example
// If display: flex; is needed
@include flex-column(true);

// If display: flex; is not needed
@include flex-column();
*********************/

/*********************
	Flex Direction

@example
// Center Vertically and horizontally
@include flex-center();

// Center only horizontally
@include flex-center(hr);

// Center only vertically
@include flex-center(vr);

*********************/

/*********************
Flex Grid Width

@example

@include flex-grid-width(5, 30px);

Note: Do not forget to add column-gap in the parent element

*********************/

/*********************
	Flex Width

@example

@include flex-width(calc(100% / 3));
*********************/

/**
* Mixin to declare Font-face
*
*/

/**This is the block Style*/

.fr-insights .container {
  background: var(--color-secondary);
  padding-block: 187px 200px;
  position: relative;
  border-radius: 0 0 20px 20px;
}

@media screen and (max-width: 991px) {
  .fr-insights .container {
    padding-block: 96px 100px;
    padding-inline: 0;
  }
}

@media screen and (max-width: 767px) {
  .fr-insights .container {
    border-radius: 0 0 16px 16px;
  }
}

.fr-insights .abs-graphic {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0px;
  right: 0;
  pointer-events: none;
}

@media screen and (max-width: 575px) {
  .fr-insights .abs-graphic {
    bottom: -30px;
  }
}

.fr-insights .abs-graphic img {
  height: 100%;
  width: 100%;
  -o-object-position: bottom;
     object-position: bottom;
}

.fr-insights .abs-graphic img.desktop-img {
  -o-object-fit: contain;
     object-fit: contain;
}

@media screen and (max-width: 575px) {
  .fr-insights .abs-graphic img.desktop-img {
    display: none;
  }
}

@media only screen and (min-width: 1460px) {
  .fr-insights .abs-graphic img.desktop-img {
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: top;
       object-position: top;
  }
}

@media screen and (min-width: 576px) {
  .fr-insights .abs-graphic img.mobile-img {
    display: none;
  }
}

.fr-insights_headlines {
  text-align: center;
  max-width: 450px;
  margin-inline: auto;
  z-index: 3 !important;
}

@media screen and (max-width: 991px) {
  .fr-insights_headlines {
    margin-bottom: 48px;
    padding-inline: 25px;
  }
}

.fr-insights_headlines .mini-title {
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  margin-bottom: 30px;
}

@media screen and (max-width: 991px) {
  .fr-insights_headlines .mini-title {
    margin-bottom: 26px;
  }
}

.fr-insights .text-one-column__heading {
  margin-bottom: 30px;
}

@media screen and (max-width: 991px) {
  .fr-insights .text-one-column__heading {
    margin-bottom: 20px;
  }
}

.fr-insights_listing {
  --card-top-gap: 100px;
}

@media screen and (max-width: 991px) {
  .fr-insights_listing {
    overflow: hidden;
    position: relative;
    padding-left: 24px;
  }
}

@media screen and (min-width: 992px) {
  .fr-insights_listing {
    max-width: 1199px;
    margin-inline: auto;
    margin-top: -33px;
    padding-bottom: var(--card-top-gap);
  }
  .fr-insights_listing:not(:has(.c-card--featured)) {
    margin-top: 54px;
    padding-bottom: 0;
  }
}

.fr-insights_listing .swiper-pagination {
  position: static;
  padding-top: 34px;
  margin-left: -12px;
}

@media screen and (min-width: 992px) {
  .fr-insights_listing .swiper-pagination {
    display: none;
  }
}

.fr-insights_listing .swiper-pagination .swiper-pagination-bullet {
  border-radius: 2px;
  border: 1px solid #bbc6ce;
  background-color: transparent;
}

.fr-insights_listing .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

@media screen and (min-width: 992px) {
  .fr-insights_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
  .fr-insights_grid .swiper-slide:has(.c-card--featured) {
    grid-column: 2/span 2;
    grid-row: 1/span 2;
    transform: translateY(var(--card-top-gap));
  }
}

.fr-insights_grid .c-card .c-card__media:before {
  content: "";
  position: absolute;
  right: 24px;
  top: 24px;
  width: 20px;
  height: 20px;
  transform: rotate(-45deg);
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI3LjUuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICAgIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IgogICAgIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CiAgPHBhdGggZD0iTTUsMTJoMTQiCiAgICAgICAgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6I0ZGRkZGRjtzdHJva2Utd2lkdGg6MS41O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDsiIC8+CiAgPHBhdGggZD0iTTEyLDVsNyw3bC03LDciCiAgICAgICAgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6I0ZGRkZGRjtzdHJva2Utd2lkdGg6MS41O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDsiIC8+Cjwvc3ZnPgoK);
  z-index: 1;
  opacity: 0;
  transition: all 0.3s ease;
}

.fr-insights_grid .c-card:hover .c-card__media:before {
  opacity: 1;
  transform: rotate(-45deg) translate(10px, 0);
}

/*# sourceMappingURL=style-index.css.map*/