.av_intro_highlights_highlight-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 45px;
        padding: 40px 70px;
        max-width: 100%;
        margin: 0 auto;
        background: #ebebeb;
    }

    .av_intro_highlights_highlight-tile {
        cursor: pointer;
        min-height: 315px;
        perspective: 1000px;
        transform-style: preserve-3d;
        transition: transform 0.3s ease;
    }

    .av_intro_highlights_highlight-tile:hover {
        transform: translateY(-8px);
    }

    .av_intro_highlights_flip-inner {
        position: relative;
        width: 100%;
        height: 100%;
        transition: transform 0.6s;
        transform-style: preserve-3d;
        min-height: 200px;
    }

    .av_intro_highlights_highlight-tile.av_intro_highlights_active .av_intro_highlights_flip-inner {
        transform: rotateY(180deg);
    }

    .av_intro_highlights_front-content,
    .av_intro_highlights_back-content {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
        padding: 25px;
        box-sizing: border-box;
        border-top: solid 4px #05164d;
    }

    .av_intro_highlights_front-content {
        background: #fff;
        color: #333;
        overflow: visible;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.09);
    }

    .av_intro_highlights_front-content::after {
        content: '';
        position: absolute;
        right: 0;
        bottom: 0;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 0 0 0;
        border-color: transparent transparent #05164d transparent;
        transition: all 0.3s ease;
        z-index: 1;
        border-bottom-right-radius: 10px;
    }

    .av_intro_highlights_highlight-tile:hover .av_intro_highlights_front-content::after {
        border-width: 0 0 90px 240px;
    }

    .av_intro_highlights_highlight-tile.av_intro_highlights_active .av_intro_highlights_front-content::after {
        border-width: 0 0 0 0;
    }

    .av_intro_highlights_mehr-anzeigen {
        position: absolute;
        bottom: 15px;
        right: 15px;
        color: white;
        font-size: 0.9em;
        font-weight: 700;
        z-index: 2;
        opacity: 0;
        transition: opacity 0.2s ease;
        pointer-events: none;
    }

    .av_intro_highlights_highlight-tile:hover .av_intro_highlights_mehr-anzeigen {
        opacity: 1;
        transition-delay: 0.1s;
    }

    .av_intro_highlights_highlight-tile.av_intro_highlights_active .av_intro_highlights_mehr-anzeigen {
        opacity: 0;
        visibility: hidden;
    }

    .av_intro_highlights_back-content {
        background: #fff;
        color: #444;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.09);
        transform: rotateY(180deg);
    }

    .av_intro_highlights_highlight-tile img {
        font-size: 2.5em;
        margin-top: -40px;
        width: 85px;
    }

    .av_intro_highlights_highlight-tile h3 {
        margin: 10px 0;
        text-align: center;
        font-size: 1.3em;
        color: #05164d;
    }

    .av_intro_highlights_highlight-tile p {
        line-height: 1.7;
        text-align: center;
        margin: 0;
        font-size: 1.0em;
        color: #05164d;
    }

  @media (max-width: 700px) {
    .av_intro_highlights_highlight-tile p {
        font-size: 0.9em;
    }
  }

  /* New styles for arrows and responsive behavior */
  .arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 2em;
    color: #05164d;
    z-index: 10;
    display: block; /* Ensure arrows are visible */
  }

  .arrow.left {
    left: 25px; /* Position arrows next to tiles */
  }

  .arrow.right {
    right: 25px; /* Position arrows next to tiles */
  }

  .av_intro_highlights_highlight-container {
    position: relative; /* Ensures arrows are positioned relative to the container */
  }

  @media (max-width: 1582px) {
    .av_intro_highlights_highlight-container {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  @media (max-width: 1400px) {
    .av_intro_highlights_highlight-container {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  @media (max-width: 1300px) {
    .av_intro_highlights_highlight-container {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (max-width: 1100px) {
    .av_intro_highlights_highlight-container {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 800px) {
    .av_intro_highlights_highlight-container {
      grid-template-columns: repeat(1, 1fr);
    }
  }