*,
{
    margin: 0;
    padding: 0;
    box-sizing:border-box;
}
body
{
    background-color: rgb(64,64,64);
    /* direction:rtl; */
}
.container
{
    width: 700px;
    height: 350px;
    margin: 100px auto;
    border: 2px solid black ;
    display: flex;
    font-size: 30px;
    justify-content: center;
    align-items:stretch;
    /* flex-direction:row;
    flex-wrap:wrap-reverse; */
    /* flex-flow:wrap row; */
    /* x axis */
    
    /* y axis */
    
    /* y if multi rows */
    /* align-content:center; */
    >div
    {
        flex-basis:100px;
        flex-grow:1;
        flex-shrink:1;
        /* flex:shrink grow basis */
        /* height: 100px; */
        border:1px solid yellow;
        background-color: blueviolet;
        /* margin:3px 3px; */
        transition:1s;
        background-image:url(../images/beautiful-flowers-rose.webp);
        background-size:auto 100%;
        &:hover
        {
            flex-grow:10;
        }

    }

}
.body
{
    background-color:white;
}
header,footer
{
    width: 100%;
    height: 400px;
    background-color:black;

}
.main
{
    width: 100%;
    display: flex;
    align-items: stretch;
    gap: 20px;
    >div
    {
        border:2px solid red;
        &:first-of-type
        {
            border:5px solid purple;
            width: 30%;
            >aside
            {
                width: 100%;
                height: 400px;
                background-color: blanchedalmond;
                position: sticky;
                top:0;
            }

        }
        &:last-of-type
        {
           border: 10px solid yellow;
            width: 70%;
            >p
            {
                font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
                width: 80%;
                margin: 100px auto;
            }
        }
    }
}
.container2
{
    width: 70%;
    height: 300px;
    border:2px solid black;
    margin:100px auto;
    display: flex;
    >div
    {
        width:80px;
        height: 100px;
        border:2px solid black;
        background-color: orangered;
        flex: 1 1 80px;
        &:nth-of-type(3)
        {
            flex-grow:10;
            flex-shrink:10;
            order:-1;
            align-self:flex-end ;
        }
    }
}
.main2
{
    >*
    {
        margin: 0;
        padding:0;
        box-sizing: border-box;
    }
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; 
    gap: 20px;
>.card
    {
        width:400px;
        height: 400px;
        padding:20px;
        border:2px solid black;
        &:hover
        {
            border-radius:40px;
            transition:1s;
        }
        >img
        {
            &:hover
            {
                border-radius:30px;
                transition:1s;
            }
        }
        >figcaption
        {
             &:hover
            {
                border-radius:50px;
                transition:1.5s;
            }
        }
        >img
        {
        width: 100%;
        height: 300px;
        background-color: white;
        object-fit: cover;
      
        }
        >figcaption
        {
            width: 100%;
            background-color: black;
            color:wheat;
            font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
            padding: 10px 0 ;
            display: flex;
            justify-content: center;
        }
    } 
}