/* =========================
   SIGNLAB TEAM COLLAGE
========================= */

.signlab-team{
  width: 100%;
}

.signlab-team__grid{
  --big: var(--signlab-team-big,547px);
  --small: var(--signlab-team-small,257px);
  --gap: calc(var(--big) - (var(--small) * 2));
  display: grid;
  grid-template-columns: var(--big) var(--small);
  grid-template-rows: var(--small) var(--small);
  gap: var(--gap);
  justify-content: center;
  align-content: start;
}

.signlab-team__card{
  position: relative;
  overflow: hidden;
  border-radius: var(--signlab-team-card-radius,26px);
  background: #e9eef2;
  box-shadow: var(--signlab-team-card-shadow,0 18px 45px rgba(15,23,42,.14));
}

.signlab-team__card--main{
  grid-column: 1;
  grid-row: 1 / span 2;
  width: var(--big);
  height: var(--big);
}

.signlab-team__card--side-1{
  grid-column: 2;
  grid-row: 1;
  width: var(--small);
  height: var(--small);
}

.signlab-team__card--side-2{
  grid-column: 2;
  grid-row: 2;
  width: var(--small);
  height: var(--small);
}

.signlab-team__card > img,
.signlab-team__card .signlab-team__img{
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
}

.signlab-team__overlay{
  position: absolute;
  left: var(--signlab-team-overlay-side,18px);
  right: var(--signlab-team-overlay-side,18px);
  bottom: var(--signlab-team-overlay-bottom,16px);
  z-index: 3;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
  text-shadow: 0 6px 24px rgba(0,0,0,.42);
}

.signlab-team__card::after{
  content:"";
  position:absolute;
  inset: 0;
  background: var(--signlab-team-overlay-bg,rgba(0,0,0,0));
  transition: background .22s ease;
  pointer-events: none;
}

.signlab-team__card:hover::after{
  background: var(--signlab-team-overlay-bg-hover,rgba(0,0,0,.28));
}

.signlab-team__card:hover .signlab-team__overlay{
  opacity: 1;
  transform: translateY(0);
}

.signlab-team__name{
  color: var(--signlab-team-name-color,#fff);
  font-size: var(--signlab-team-name-size,28px);
  font-weight: var(--signlab-team-name-weight,800);
}

.signlab-team__role{
  color: var(--signlab-team-role-color,#43ac8b);
  font-size: var(--signlab-team-role-size,16px);
  font-weight: var(--signlab-team-role-weight,700);
}

.signlab-team__desc{
  color: var(--signlab-team-desc-color,rgba(255,255,255,.88));
  font-size: var(--signlab-team-desc-size,14px);
  font-weight: var(--signlab-team-desc-weight,400);
}

@media (max-width: 900px){
  .signlab-team__grid{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 18px;
    justify-content: stretch;
  }

  .signlab-team__card--main,
  .signlab-team__card--side-1,
  .signlab-team__card--side-2{
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 480px){
  .signlab-team__grid{
    gap: 14px;
  }

  .signlab-team__card{
    border-radius: 18px;
  }

  .signlab-team__overlay{
    left: 14px;
    right: 14px;
    bottom: 14px;
    opacity: 1;
    transform: none;
  }

  .signlab-team__card::after{
    background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.42) 100%);
  }
}

@media (hover: none){
  .signlab-team__overlay{
    opacity: 1;
    transform: none;
  }

  .signlab-team__card::after{
    background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.38) 100%);
  }

  .signlab-team__card:hover::after{
    background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.38) 100%);
  }
}