@media screen and (orientation: landscape){
html,body {
display: grid;
grid-template-areas:
    "header header header"
    "section main main"
    "footer footer footer";
grid-template-columns: 1fr 9fr 1fr;
grid-template-rows: 2fr 10fr 3fr;
height: 100vh;
width: 100vw;
margin: 0;
}
header {
display: flex;
flex-flow: column nowrap;
grid-area: header;
justify-content: space-around;
align-items: center;
}
header > .headerdiv {
display: flex;
flex-flow: row nowrap;
justify-content: space-evenly;
align-items: center;
width: 90%;
min-height: 40px;
margin: 3px 15px;
border-radius: 5px;
}
header > .headerdiv > .dropdown {
display: flex;
align-items: center;
justify-content: space-evenly;
object-fit: contain ;
height: 80%;
min-width: 40px; 
border-radius: 5px;
}
section {
display: grid;
grid-area: section;
background-color: #62916c;
}
main  {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
background-color: rgb(227, 245, 237);
grid-area: main;
}

main .maindiv {
width: 80%;
display: flex;
flex-flow: column nowrap;
justify-content: space-around;
align-items: center;
background-color: azure;
margin: 40px auto;
border-radius: 15px;
}
main .maindiv > div {
width: 100%;
height: 400px;
display: flex;
object-fit: contain;
flex-flow: column nowrap;
justify-content: flex-start;
margin: 80px auto;
border-radius: 5px;
align-items: center;
background-color: #b3e29a;
}
main .maindiv > div .genres {
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
align-items: center;
object-fit: cover;
width: 98%;
height: 300px;
}
main .maindiv > div .productname {
    width: 40%;
    height: 10%;
    text-align: center;
    font-size: 1.5em;
    background-color: rgb(0, 192, 105);
    border-radius: 5px;
}
main .maindiv > div .genres > div {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-around;
    align-items: center;

}
main .maindiv > div .genres > div .genrename {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
main .maindiv > div .genres > div .img {
    width: 150px;
    height: 100%;
    object-fit:  cover;
    border-radius: 5px;
    filter: grayscale(50%); /* Apply grayscale effect */
    transition: transform 3s ease-in-out;
}
footer {
display: grid;
grid-area: footer;
margin: 0px;
}



img:hover {
z-index: 1;
transform: scale(1.1); /* Slight zoom on hover */
filter: grayscale(0%); /* Remove grayscale on hover */
}
}
@media screen and (orientation: portrait){
    html,body {
display: grid;
grid-template-areas:
    "header "
    "main "
    "footer";
grid-template-columns: 1fr;
grid-template-rows: 2fr 10fr 3fr;
height: 100vh;
width: 100vw;
margin: 0;
}
header {
display: flex;
flex-flow: column nowrap;
grid-area: header;
justify-content: space-around;
align-items: center;
}
header .headerdiv {
display: flex;
flex-flow: row nowrap;
justify-content: space-evenly;
align-items: center;
width: 90%;
min-height: 40px;
margin: 3px 15px;
border-radius: 5px;
}
header .headerdiv .dropdown {
display: flex;
align-items: center;
justify-content: space-evenly;
object-fit: contain ;
height: 80%;
min-width: 40px; 
border-radius: 5px;
}
section {
display: none;
grid-area: section;
background-color: #62916c;
}
main  {
display: flex;
width: 100%;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
background-color: rgb(227, 245, 237);
grid-area: main;
}

main .maindiv {
width: 100%;
display: flex;
flex-flow: column nowrap;
justify-content: space-around;
align-items: center;
background-color: azure;
margin: 40px 0px;
border-radius: 15px;
}


main .maindiv > div {
width: 100%;
height: 400px;
display: flex;
object-fit: contain;
flex-flow: column nowrap;
justify-content: flex-start;
margin: 40px 2px;
border-radius: 5px;
align-items: center;
background-color: #b3e29a;
}

main .maindiv > div .genres {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: center;
object-fit: contain;
width: 98%;
height: 80%;
}

main .maindiv > div .productname {
    width: 60%;
    height: 15%;
    text-align: center;
    font-size: 1.5em;
    background-color: rgb(0, 192, 105);
    border-radius: 5px;
}
main .maindiv > div .genres > div {
    display: flex;
    flex-flow: column nowrap;
    object-fit: contain;
    justify-content: space-around;
    align-items: center;
    height: 87%;
    width: 18%;
}
main .maindiv > div .genres > div .genrename {
    width: 40px;
    height: 17%;
    object-fit: cover;
}

main .maindiv > div .genres > div .img {
    max-width: 100px;
    height: 75%;
    border-radius: 5px;
    filter: grayscale(50%); 
    transition: transform 3s ease-in-out;
}

footer {
display: grid;
grid-area: footer;
margin: 0px;
}



img:hover {
      z-index: 1;
      transform: scale(1.1); /* Slight zoom on hover */
      filter: grayscale(0%); /* Remove grayscale on hover */
}

}