.brand-mark {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  padding: 0;
  overflow: hidden;
  border-radius: 9px;
  background: transparent;
}

.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.product-shot {
  position: relative;
  justify-self: center;
  width: min(100%, 430px);
  height: 620px;
  margin: 0;
  isolation: isolate;
}

.product-shot::before {
  position: absolute;
  z-index: -1;
  inset: 12% 8%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #28534b80, #19262900 70%);
  content: "";
  filter: blur(28px);
}

.shot-main,
.shot-peek {
  position: absolute;
  width: 58%;
  overflow: hidden;
  border-radius: 18px;
  background: #111c20;
  box-shadow: 0 24px 56px #0008;
}

.shot-main {
  z-index: 2;
  bottom: 38px;
  left: 8%;
  transform: rotate(-5deg);
}

.shot-peek {
  z-index: 1;
  top: 12px;
  right: 4%;
  transform: rotate(7deg);
}

.shot-main img,
.shot-peek img {
  display: block;
  width: 100%;
  height: auto;
}

.product-shot figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #aebdb7;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.product-shot figcaption span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
}

@media (max-width: 760px) {
  .product-shot {
    width: min(100%, 360px);
    height: 525px;
  }

  .shot-main,
  .shot-peek {
    border-radius: 15px;
  }

  .shot-main {
    bottom: 34px;
  }

  .shot-peek {
    top: 8px;
  }
}