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

body{
font-family:Arial, Helvetica, sans-serif;
background:#e9e5dd;
color:#111;
}




.hero{
   background:url("Assets/pictures/promenade.jpg") center/cover no-repeat;

    /* Parallax */
    background-attachment:fixed;
    background-position:center;
    background-size:cover;
}





/* CATEGORY */
.categories{
display:grid;
grid-template-columns:repeat(3,1fr);
margin:80px 10%;
gap:20px;
}
.category{
height:400px;
position:relative;
overflow:hidden;
cursor:pointer;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
color:white;
font-size:26px;
letter-spacing:3px;
}

/* IMAGES */
.face{
background:url("Assets/pictures/Spaghetti.jpg") center/cover;
border-radius: 20px;
}
.tools{
background:url("Assets/pictures/hafen\ sonnenuntergang.jpg") center/cover;
border-radius: 20px;
}
.body{
background:url("Assets/pictures/l.jpg") center/cover;
}

/* HOVER EFFECT */

.category span{
position:relative;
z-index:2;
margin-bottom:20px;
}










/* STRIPE SECTION */
.strip-section{
display:grid;
grid-template-columns:1fr 1fr;
margin:120px 10%;
min-height:500px;
}

/* STRIPES */
.strip-right{
background:repeating-linear-gradient(
90deg,
#f0b1b6 0px,
#f0b1b6 60px,
#ffffff 60px,
#ffffff 120px
);
display:flex;
align-items:center;
justify-content:center;
position:relative;
}

/* TEXT */
.split-text{
display:flex;
flex-direction:column;
justify-content:center;
padding-right:60px;
}

.split-text button{
background:#2e5c4f;
color:white;
border:none;
padding:12px 28px;
border-radius:25px;
cursor:pointer;
}

/* POLAROIDS */
.polaroid{
position:absolute;
background:white;
padding:10px;
box-shadow:0 10px 25px rgba(0,0,0,0.2);
transition:.4s;
}
.polaroid img{
width:160px;
height:200px;
object-fit:cover;
}

/* POSITIONEN */
.p1{
top:60px;
left:80px;
transform:rotate(-8deg);
}
.p2{
top:200px;
right:120px;
transform:rotate(6deg);
}
.p3{
bottom:60px;
left:200px;
transform:rotate(-4deg);
}

/* HOVER */
.polaroid:hover{
transform:scale(1.1) rotate(0deg);
z-index:5;
}

/* IMAGE GRID */

.travel-grid{
    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

    padding:80px 10%;
}

/* EINZELNES BILD */

.grid-item{
    height:260px;

    border-radius:20px;

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    overflow:hidden;

    transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;

    cursor:pointer;
}

/* =========================
   EINZELNE BILDER
========================= */

.grid-item:nth-child(1){
    background-image:url("Assets/pictures/bar\ hvar.jpg");
}

.grid-item:nth-child(2){
    background-image:url("Assets/pictures/kids\ picture.jpg");
}

.grid-item:nth-child(3){
    background-image:url("Assets/pictures/Amerika.jpg");
}
.grid-item:nth-child(4){
    background-image:url("Assets/pictures/orki\ love.jpg");
}

.grid-item:nth-child(5){
    background-image:url("Assets/pictures/Boote.jpg");
}

.grid-item:nth-child(6){
    background-image:url("Assets/pictures/abenddämmerung\ lavendelfeld.jpg");
}

.grid-item:hover{
    transform:scale(1.05);

    box-shadow:
    0 15px 35px rgba(0,0,0,0.25);
}









/* MOBILE */
/* ============================= */
/* MOBILE DESIGN */
/* ============================= */

@media (max-width: 900px){





/* HERO */

.hero{
height:60vh;
}

.hero-title{
font-size:50px;
letter-spacing:3px;
}

/* CATEGORY */

.categories{
grid-template-columns:1fr;
gap:25px;
margin:60px 6%;
}

.category{
height:300px;
}

/* STRIPE SECTION */

.strip-section{
grid-template-columns:1fr;
gap:60px;
margin:80px 6%;
}

/* TEXT OBEN */

.strip-left{
padding-right:0;
text-align:center;
align-items:center;
}

/* GESTREIFTER BEREICH */

.strip-right{
min-height:420px;
position:relative;
}

/* POLAROIDS */

.polaroid img{
width:130px;
height:170px;
}

/* Positionen */

.p1{
top:40px;
left:20%;
}

.p2{
top:160px;
right:20%;
}

.p3{
bottom:30px;
left:40%;
}

/* TRAVEL GRID */

.travel-grid{
grid-template-columns:repeat(2,1fr);
gap:20px;
margin:80px 6%;
}

.grid-item{
height:180px;
}

/* COLLAGE */

.collage-grid{
grid-template-columns:repeat(2,1fr);
}

/* FOOTER */

.footer{
grid-template-columns:1fr;
text-align:center;
gap:40px;
}

}