body {
    background: #212121;
}



section {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 95vh;

}

#cards {
    height: 400px;
    border-radius: 4px;
    width: 70%;
    display: flex;
    gap: 5px;
    padding: 6px;
    justify-content: center;
    align-items: center;
}


#cards .card-items {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-decoration: none;
    color: azure;
    filter: grayscale(100%);
    flex: 1;
    transition: all .5s;

}

#cards .card-items:hover{filter: none;
flex: 5;
transition: all .5s;}

#cards .card-items h1 {
    color: white;
    font-size: 23px;
    transform: rotate(-90deg);
    font-weight: 700;
    font-family: Arial, Helvetica, sans-serif;
    transition: all .5s;
    letter-spacing: 2.5px;
}

#cards .card-items:hover h1 {
    transform: rotate(0);
    text-shadow: 4px 2px 24px rgba(255, 255, 255, 1);

    
}

#cards .card-items:nth-child(1) {
    background-image: url(../images/02.png);

}

#cards .card-items:nth-child(2) {
    background-image: url(../images/03.png);

}

#cards .card-items:nth-child(3) {
    background-image: url(../images/05.png);

}

#cards .card-items:nth-child(4) {
    background-image: url(../images/06.png);

}

#cards .card-items:nth-child(5) {
    background-image: url(../images/07.png);

}

#cards .card-items:nth-child(6) {
    background-image: url(../images/08.png);

}