* {
    margin: 0; padding: 0; border: 0; box-sizing: border-box;

}

body{
    background-color: hsla(36, 87%, 67%,.75);
   font-family: Verdana, Geneva, Tahoma, sans-serif;


}

h1 {
text-align: center;
font-weight: normal;
text-transform: lowercase;
border-left: 4px solid gray;
border-bottom: 4px solid gray;
margin: 8px 8px 40px 8px;
padding: 8px;
transform: rotate(-4deg);
border-radius: 0px 0px 0px 32px ;


}

#samples-parent {
display: flex;
flex-flow: row wrap;
    justify-content: space-between;
    padding: 24px;
    



}

#samples-parent figure {

    border: 4px solid rgb(340, 100, 420);
    height: 250px;
    aspect-ratio: 2/1.5 ;
    flex-grow: 0;
    flex-basis: 30%;
    margin-bottom: 16px;
    border-radius: 32px 0px 32px 0px;
    position: relative;
}

figure h2 {
    position: absolute;
    top: 12px; left: -3%;
    background-color: hsla(200, 50%, 0%, .69);
    color: yellow;
    width: 107%;
    text-align: center;
    padding: 4px 0;
    transition: top .5s  ease-in-out;

}
figure figcaption {

position: absolute;
top: 80%;left: 0;
width: 100%; height: 20%;
background-color: hsl(280 66% 63% / .5);
text-align: center;
color: #eee;
border-radius: 0px 0px 28px 0px ;
padding: 8px;


}

#samples-parent figure:nth-child(1){
    border-radius: 40% 40% 12% 0;
    border: 8px solid rgb(164, 208, 98);
}

#samples-parent figure:nth-child(2){
    overflow: hidden;
}
#samples-parent figure:nth-child(3) img{
    width: 100%; height: 100%;
    border-radius: 10% 0 10% 0;
    overflow: hidden;
    object-fit: cover;
}

#samples-parent figure:nth-child(4) div{

    width: 30%;
    aspect-ratio: 1/1;
    border: 0px solid red ;
    margin:  60px auto;
    background-image: conic-gradient(green 0%, green 10%, orange 10%, orange 40%, blue 40%, blue 65%, gray 65%, gray 72%, hotpink 72%, hotpink 100% );
    border-radius: 50%;
    

}

#samples-parent figure:nth-child(5) div {
    width: 30%;
    aspect-ratio: 1/1;
    border: 4px solid red ;
    margin:  60px auto;
    background-image: repeating-radial-gradient(red 0px, red 10px,  blue 10px, blue 20px );
}
/** #samples-parent figure:nth-child(6) img {
    width: 100%; height: 100%;
    object-fit:cover;
    border-radius: 10% 0 10% 0;

} **/

#samples-parent figure:nth-child(6){
    padding-top: 50px;

}

#samples-parent figure:nth-child(6) img{
    float: left;
}

#samples-parent figure:nth-child(6) h3{
    clear: left;
    font-size: 1.125em;}


#samples-parent figure:nth-child(6) p {
    font-size: .8em;
}

#samples-parent figure:nth-child(7) h3{
    text-shadow: -3px 4px 10px orangered ;
    margin: 50px auto;
    text-align: center;
    font-size: 3.6em;
}

#samples-parent figure:nth-child(8) h3{
    border: 3px solid red;
    padding: 10px;
    margin: 50px auto;
    margin-left: 10px; margin-right: 10px; 
    text-align: center;
    font-size: 3em;
    transform: rotate(10deg) skewX(10deg);
}

#samples-parent figure:nth-child(9) {

    background-color: yellowgreen;
    transition: background-color .6s linear;
}

#samples-parent figure:nth-child(9):hover {
    background-color: orangered;
 
}

#samples-parent figure:nth-child(9):hover h2 {
    top: 100px;
}