*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,Helvetica,sans-serif
}

body{
background:#ffffff;
color:#000000
}

/* HEADER */

.main-header{
position:relative;
height:200px;
background:#fff;
padding:15px 5%;
overflow:hidden
}

.header-black{
position:absolute;
top:40%;
right:0;
width:40%;
height:60%;
background:#000;
border-top-left-radius:40px;
border-bottom-left-radius:40px
}

.main-header nav{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
height:145%
}

.logo{
height:125%;
position:relative;
top:-10%;
}

nav ul{
list-style:none;
display:flex;
gap:25px
}

nav a{
color:#fff;
text-decoration:none;
font-weight:bold
}

nav a:hover{
opacity:.7
}

/* MAIN */

main{
padding:80px 10%
}

/* CARTES */

.cards-container{
display:grid;
grid-template-columns:50% 100% 50%;
grid-template-areas:
"hg . hd"
"bg . bd";
gap:60px;
margin-top:60px
}

.card-hg{grid-area:hg}
.card-bg{grid-area:bg}
.card-hd{grid-area:hd}
.card-bd{grid-area:bd}

.flip-card{
perspective:1000px;
height:420px;
cursor:pointer;
transition:box-shadow .3s
}

.flip-card-inner{
position:relative;
width:100%;
height:100%;
transition:transform .8s;
transform-style:preserve-3d
}

.flip-card.active .flip-card-inner{
transform:rotateY(180deg)
}

.flip-card-front,
.flip-card-back{
position:absolute;
width:100%;
height:100%;
backface-visibility:hidden;
border-radius:20px;
padding:30px;
background:#000;
color:#fff;
}

.flip-card-front{
display:flex;
align-items:center;
justify-content:center;
text-align:center
}

.flip-card-front h3{
font-size:1.4rem;
letter-spacing:1px
}

.flip-card-back{
transform:rotateY(180deg);
font-size:.95rem;
line-height:1.6
}

.flip-card-back ul{
padding-left:20px
}

/* FOOTER */

footer{
background:#000;
color:#fff;
text-align:center;
padding:20px;
margin-top:80px;
font-size:.9rem
}

/* RESPONSIVE */

@media(max-width:900px){
.cards-container{
grid-template-columns:1fr;
grid-template-rows:auto;
grid-template-areas:
"hg"
"hd"
"bg"
"bd"
}
}