@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');

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

body{
  font-family:"DM Sans",sans-serif;
  overflow-x:hidden;
  background:#111;
}

section{
  min-height:100vh;
  overflow:hidden;
}

.container{
  min-height:100vh;
  padding:2rem;
  display:flex;
  transform:rotate(25deg);
  transform-origin:bottom left;
  will-change:transform;
}

.one .container{
  background:#d8d3c4;
  color:#000;
}

.two .container{
  background:#1d1d1d;
  color:#fff;
}

.three .container{
  background:#8f7cff;
  color:#000;
}

.four .container{
  background:#f0c808;
  color:#000;
}

.col{
  flex:1;
  display:flex;
}

.center{
  align-items:center;
  justify-content:center;
}

.text{
  flex-direction:column;
  justify-content:space-between;
}

.column{
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:1rem;
}

.img{
  width:40%;
  aspect-ratio:4/5;
  overflow:hidden;
}

.large{
  width:30%;
}

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

h1{
  font-size:clamp(3rem,10vw,9rem);
  line-height:1;
  text-transform:uppercase;
}

p{
  font-size:1.2rem;
  max-width:600px;
  line-height:1.5;
}

@media(max-width:900px){
  .container{
    flex-direction:column;
  }

  .img,
  .large{
    width:100%;
  }

  .text{
    gap:2rem;
  }
}