/* GRID */
/* DEFAULT */
.agc-grid {
  display: grid;
  /*grid-auto-rows: 260px;*/
  /*gap: 10px;*/
  position: relative;
}

/* LAYOUT 1 */
.agc-grid.layout1 {
  grid-template-columns: 20% 30% 25% 25%;
}

/* LAYOUT 2 */
.agc-grid.layout2 {
  grid-template-columns: 25% 25% 20% 30%;
}

/* CARD */
.agc-card {
  position: relative;
  overflow: visible;
      align-content: center;
}

/* IMAGE */
.agc-main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* HOVER PANEL */
.agc-hover {
  position: absolute;
  top: 0;
  height: 100%;
  width: 0;
  background: var(--hover-bg);
  overflow: hidden;
  display: flex;
  align-items: center;
  z-index: 20;
   /* 🔥 smoother animation */
  transition: 
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.35s ease;

  will-change:  width;
}

/* DIRECTION */
.dir-right .agc-hover {
  left: 100%;
}

.dir-left .agc-hover {
  right: 100%;
}

/* CONTENT */
.agc-inner {
  padding: 25px;
}

.top-logo {
  max-width: 60px;
  /*margin-bottom: 10px;*/
}

/* CONTENT CARD */
.agc-content {
  padding: 25px;
  background: #f5f5f5;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* TEXT BLOCK */
.agc-text {
  font-size: 32px;
  font-weight: bold;
  padding: 40px;
}

/* BLANK */
.agc-blank {
  background: #6b2d43;
  width: 100%;
  height: 100%;
}

/* HOVER STACK FIX */
.agc-card:hover {
  z-index: 50;
}

.agc-main img,
.top-logo {
  display: block;
}

/* HOVER PANEL BACKGROUND */
.agc-hover {
  background: var(--hover-bg);
}

/* CONTENT CARD HOVER */
.agc-card.type-content:hover .agc-content {
  background: var(--hover-bg);
}
/* IMAGE BACKGROUND CARD */
.agc-image-bg {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.agc-image-bg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* OPTIONAL HOVER EFFECT */
.agc-card.type-image_bg:hover .agc-image-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hover-bg);
  opacity: 0.3;
  transition: 0.3s;
}
/* TEXT COLOR FIX ON DARK BG */
/*.agc-card:hover h3,*/
/*.agc-card:hover p {*/
/*  color: #fff;*/
/*}*/