* { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  --img: url("../images/three.jpg");
  --pink: #ff4fa0;
}

body{
  min-height:100svh;
  font-family: system-ui, Arial, sans-serif;
  background: linear-gradient(#f6f7f9, #eceff3);
  display:flex;
  flex-direction:column;
  align-items:center;
}

.hero{
  padding: 40px 16px 10px;
  text-align:center;
}

h1{
  line-height: .85;
  font-weight: 900;
  font-size: clamp(60px, 12svw, 160px);
  letter-spacing: 6px;
  text-transform: uppercase;

  background-image: var(--img);
  background-size: cover;
  background-position: center 7%;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.tri{
  margin: 28px 0 80px;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 4svw, 40px);
  justify-content: center;
  align-items: center;
}

.card{
  position: relative;
  width: clamp(180px, 26svw, 280px);
  aspect-ratio: 1 / 1;
  border: 8px solid var(--pink);
  overflow: hidden;
  transform: rotate(45deg);
  transition: transform .15s ease;


  --x: 50%;
  --y: 40%;
  --zoom: 170%;  
}
.card:hover{ transform: rotate(45deg) scale(1.03); }


.card::after{
  content: "";
  position: absolute;
  inset: -24%;
  background-image: var(--img);
  background-repeat: no-repeat;
  background-size: var(--zoom) auto; 
  background-position: var(--x) var(--y);
  transform: rotate(-45deg) scale(1.04);
}

.one   { --x: 0%; --y: 6%; --zoom: 185%; }
.two   { --x: 45%; --y: 6%; --zoom: 205%; }
.three { --x: 98%; --y: 0%; --zoom: 185%; }