/*-----styles1------ */
.imgstyle1 {
    display: flex;
}

.imgstyle1>.style1container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10vmin;
    overflow: hidden;
    transform: skew(5deg);

    .style1card {
        flex: 1;
        transition: all 1s ease-in-out;
        height: 75vmin;
        position: relative;

        .style1card__head {
            color: black;
            background: rgba(255, 30, 173, 0.75);
            padding: 0.5em;
            transform: rotate(-90deg);
            transform-origin: 0% 0%;
            transition: all 0.5s ease-in-out;
            min-width: 100%;
            text-align: center;
            position: absolute;
            bottom: 0;
            left: 0;
            font-size: 1em;
            white-space: nowrap;
        }

        &:hover {
            flex-grow: 10;

            img {
                filter: grayscale(0);
            }

            .style1card__head {
                text-align: center;
                top: calc(100% - 2em);
                color: white;
                background: rgba(0, 0, 0, 0.5);
                font-size: 2em;
                transform: rotate(0deg) skew(-5deg);
            }
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: all 1s ease-in-out;
            filter: grayscale(100%);
        }

        &:not(:nth-child(5)) {
            margin-right: 1em;
        }
    }
}

/*-----styles1 end------ */