.callouts-hero-grid {
  display: grid;
  grid-template-columns: 60% 40%;
  grid-template-rows: repeat(2,minmax(220px,auto));
  column-gap: 16px;
  row-gap: 16px;

  max-height: 450px;

  /* Tablet responsiv */
  @media (max-width: 1024px) {
    grid-template-columns: 100%;
    grid-template-rows: auto;
    max-height: none;
    gap: 14px;
  }

  /* Mobil responsiv */
  @media (max-width: 768px) {
    display: flex;
    flex-direction: column;
    max-height: none;
    gap: 12px;
  }

  /* Små mobiler */
  @media (max-width: 480px) {
    gap: 10px;
  }
  
  .callouts-hero-card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    width: 100%;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: scale 0.2s ease-in-out;
    }
    &:hover img {
      scale: 1.05;
    }
    &::before {
      content: '';
      position: absolute;
      inset: 0;
      background-color: rgba(0,0,0,0.18);
      z-index: 1;
    }
    .callouts-hero-card-info {
      position: absolute;
      bottom: 24px;
      left: 16px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      z-index: 2;
      color: var(--white);

      h4 {
        font-size: 2rem;
        margin-bottom: 16px;
        text-wrap: balance;
      }
      p {
        font-size: 0.9rem;
        margin-top: 0px;
        margin-bottom: 16px;
      }
      img {
        filter: brightness(0) invert(0);
        scale: 0.75;
      }
      .simple-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--white);
        border-radius: 4rem;
        padding: 0.5rem 0.5rem 4px 0.5rem;
        &::after {
          content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-arrow-right'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
          display: inline-block;
          vertical-align: middle;
        }
        
      }
    }
  }
  .callouts-hero-card:first-child {
    grid-row: span 2;

    @media (max-width: 1024px) {
      grid-row: span 1;
    }
  }

  .callouts-hero-card {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: relative !important;
    overflow: hidden !important;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
      z-index: 1;
    }

    /* Tablet responsiv */
    @media (max-width: 1024px) {
      height: 320px !important;
      min-height: 320px !important;

      .callouts-hero-card-info {
        bottom: 20px;
        left: 16px;
        right: 16px;

        h4 {
          font-size: 1.8rem;
          margin-bottom: 12px;
        }
        p {
          font-size: 0.85rem;
          margin-bottom: 12px;
        }
      }
    }

    /* Mobil responsiv */
    @media (max-width: 768px) {
      height: 280px !important;
      min-height: 280px !important;

      .callouts-hero-card-info {
        position: absolute !important;
        bottom: 16px;
        left: 16px;
        right: 16px;
        z-index: 2 !important;

        h4 {
          font-size: 1.5rem;
          margin-bottom: 8px;
          line-height: 1.2;
        }
        p {
          font-size: 0.8rem;
          margin-bottom: 8px;
          line-height: 1.3;
        }
      }
    }

    /* Små mobiler */
    @media (max-width: 480px) {
      height: 240px !important;
      min-height: 240px !important;
      border-radius: 15px;

      .callouts-hero-card-info {
        bottom: 12px;
        left: 12px;
        right: 12px;

        h4 {
          font-size: 1.3rem;
          margin-bottom: 6px;
        }
        p {
          font-size: 0.75rem;
          margin-bottom: 6px;
        }

        .promotion-global-btn {
          padding: 8px 16px;
          font-size: 0.8rem;
        }
      }
    }
  }

}