/*************************************************************************************/
/************************************ HERO PRODUCT GRID ******************************/
/*************************************************************************************/

/* Override container for hero section */
.hero--with-image .landing-container {
  @media (min-width: 768px) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--spacing-5xl);
    position: relative;
  }
}

/* Override hero content width */
.hero--with-image .hero__content {
  width: 100%;
  @media (min-width: 768px) {
    width: 100%;
  }
  @media (min-width: 1041px) {
    width: 100%;
  }
}

/* Hero Image Grid */
.hero__image {
  position: relative;
  margin-top: var(--spacing-xl);
  display: flex;
  gap: var(--spacing-xl);
  justify-content: center;
  
  @media (min-width: 768px) {
    position: absolute;
    margin-top: 0;
    right: -2.5rem;
    top: -8rem;
  }
}

/* Columns */
.hero__column {
  display: flex;
  gap: var(--spacing-md);
  
  @media (min-width: 768px) {
    &.hero__column--1 {
      transform: translateY(1.5rem);
    }
    
    &.hero__column--2 {
      transform: translateY(-2rem);
    }
  }
}

/* Cards */
.hero__card {
  position: relative;
  width: 250px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-white);
}

.hero__column--1 .hero__card {
  height: 390px;
}

.hero__column--2 .hero__card {
  height: 490px;
}

.hero__card-logo {
  position: absolute;
  top: var(--spacing-md);
  left: var(--spacing-md);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: white;
  z-index: 2;
}

.hero__card-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.hero__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* Responsive adjustments */
@media (max-width: 1040px) {
  .hero__card {
    width: clamp(200px, 22vw, 250px);
  }
  
  .hero__column--1 .hero__card {
    height: clamp(312px, 35vw, 390px);
  }
  
  .hero__column--2 .hero__card {
    height: clamp(392px, 44vw, 490px);
  }
  
  .hero__image {
    gap: clamp(var(--spacing-md), 2vw, var(--spacing-xl));
    right: -2rem;
  }
}

@media (max-width: 768px) {
  .hero--with-image .landing-container {
    display: flex;
    flex-direction: column;
  }

  .hero__image {
    position: relative;
    right: auto;
    top: auto;
    margin-top: var(--spacing-2xl);
    padding-inline: var(--spacing-md);
  }

  .hero__card {
    width: 250px;
  }
  .hero__column--1 .hero__card {
    height: 390px;
  }
  
  .hero__column--2 .hero__card {
    height: 490px;
  }

  .hero__column--1 {
    transform: translateY(0rem);
  }
  
  .hero__column--2 {
    transform: translateY(0rem);
  }
}

@media (max-width: 430px) {
  .hero__card {
    width: 170px;
  }
  
  .hero__column--1 .hero__card {
    height: 265px;
  }
  
  .hero__column--2 .hero__card {
    height: 333px;
  }
  
  .hero__image {
    gap: var(--spacing-md);
  }
}


/*************************************************************************************/
/***************************************** FOOTER ************************************/
/*************************************************************************************/


.section.footer__hero {
  padding-bottom: 0 !important;
}

.section.footer__content {
  padding-top: var(--spacing-2xl) !important;

  @media (min-width: 768px) {
    padding-top: 0 !important;
  }
}