.index-hero {
  background: linear-gradient(2.25deg, rgba(255, 255, 255, 0.8) 1.58%, rgba(255, 255, 255, 0) 97.83%), linear-gradient(90deg, rgba(0, 71, 186, 0.1) 0%, rgba(247, 65, 176, 0.1) 100%), url("/local//templates//html/images/index-bg.jpg.webp");
  background-repeat: center;
  background-repeat: repeat;
  padding-bottom: 78px;
  padding-top: 25px; }
  @media (max-width: 1249px) {
    .index-hero {
      padding-bottom: 40px; } }
  @media (max-width: 767px) {
    .index-hero {
      background: transparent;
      padding-bottom: 0px;
      max-width: 500px;
      margin: auto; } }
  .index-hero__wrap {
    position: relative;
    padding-bottom: 40%; }
    @media (max-width: 767px) {
      .index-hero__wrap {
        padding-bottom: 300%; } }
  .index-hero__inner {
    display: grid;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "index-hero-item-1 index-hero-item-1 index-hero-item-2 index-hero-item-2 index-hero-item-5" "index-hero-item-1 index-hero-item-1 index-hero-item-3 index-hero-item-4 index-hero-item-5";
    margin: 0px -12px; }
    @media (max-width: 1249px) {
      .index-hero__inner {
        margin: 0px -5px; } }
    @media (max-width: 767px) {
      .index-hero__inner {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-areas: "index-hero-item-1 index-hero-item-1" "index-hero-item-1 index-hero-item-1" "index-hero-item-2 index-hero-item-2" "index-hero-item-3 index-hero-item-4" "index-hero-item-5 index-hero-item-5" "index-hero-item-5 index-hero-item-5"; } }
  .index-hero__item {
    padding: 12px;
    display: flex;
    position: relative; }
    @media (max-width: 1249px) {
      .index-hero__item {
        padding: 5px; } }
    .index-hero__item--1 {
      grid-area: index-hero-item-1; }
    .index-hero__item--2 {
      grid-area: index-hero-item-2; }
    .index-hero__item--3 {
      grid-area: index-hero-item-3; }
    .index-hero__item--4 {
      grid-area: index-hero-item-4; }
    .index-hero__item--5 {
      grid-area: index-hero-item-5; }
  .index-hero__card {
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    width: 100%; }
    @media (min-width: 1024px) {
      .index-hero__card:hover {
        cursor: pointer; }
        .index-hero__card:hover:after {
          position: absolute;
          content: "";
          opacity: 0; } }
    .index-hero__card:hover .index-hero__card-content {
      backdrop-filter: blur(10px);
      background: rgba(248, 248, 248, 0.8);
      left: -1px;
      right: -1px;
      bottom: -1px; }
    .index-hero__card:hover .line {
      opacity: 0; }
    .index-hero__card:hover .index-hero__card-content--mod {
      backdrop-filter: blur(10px);
      background: rgba(248, 248, 248, 0.8);
      color: #000; }
    .index-hero__card img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
    .index-hero__card-content {
      padding: 24px 8px;
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid #ffffff;
      box-sizing: border-box;
      box-shadow: 0px 4px 4px rgba(211, 211, 211, 0.25);
      position: absolute;
      bottom: 10px;
      left: 10px;
      right: 10px;
      backdrop-filter: blur(0px);
      transition: all 0.3s ease;
      border-radius: 5px;
      border-top-left-radius: 0px;
      border-top-right-radius: 0px; }
      @media (max-width: 767px) {
        .index-hero__card-content {
          bottom: 4px;
          left: 4px;
          right: 4px; } }
      .index-hero__card-content-title {
        font-family: "AlegreyaSansSC", Arial, Verdana, sans-serif;
        font-weight: 800;
        font-size: 15px; }
        @media (max-width: 1249px) {
          .index-hero__card-content-title {
            font-size: 13px; } }
      .index-hero__card-content-subtitle {
        font-size: 18px; }
        @media (max-width: 1249px) {
          .index-hero__card-content-subtitle {
            font-size: 14px; } }
  .index-hero .swiper-container {
    height: 100%; }

.swiper.index-hero-slider {
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px; }
  @media (max-width: 1249px) {
    .swiper.index-hero-slider {
      top: 5px;
      left: 5px;
      right: 5px;
      bottom: 5px; } }
  .swiper.index-hero-slider .swiper-button-prev,
  .swiper.index-hero-slider .swiper-button-next {
    opacity: 0;
    transition: all 0.3s ease; }
  @media (min-width: 1024px) {
    .swiper.index-hero-slider:hover {
      cursor: pointer; }
      .swiper.index-hero-slider:hover .swiper-button-prev,
      .swiper.index-hero-slider:hover .swiper-button-next {
        opacity: 1; } }