.plant-types {
    .main {

        .plants {

            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 20px;
            .plant {
                height: 300px;
                min-width: 290px;
                width: calc(33% - 20px);
                flex-direction: column;
                .outer {
                    height: calc(100% - 20px);
                    width: 100%;
                    overflow: hidden;
                    img {
                        object-fit: cover;
                        height: 100%;
                        width: 100%;
                        transition: .3s;
                        &:hover{
                            transform: scale(1.2);
                        }
                        
                    }
                }
                p{
                    margin-bottom: 0;
                    padding-bottom: 0;
                    text-transform: uppercase;
                    font-weight: 700;
                }

            }
        }
    }
    @media(max-width:600px){
        .main {
            .plants {
                .plant{
                    width: 100%;
                }
            }
        }
    }
}