*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Figtree", sans-serif;
}
body{
    background-color: hsl(47, 88%, 63%);
}
.container{
    width: 27%;
    margin: 5% auto;
    background-color: hsl(0, 0%, 100%);
    display: block;
    padding: 1.5%;
    border-radius: 10px;
    box-shadow: 5px 5px black, -0.5px -0.5px black;
}
.container > img{
    width: 100%;
    /* margin: 5% auto; */
    object-fit: cover;
    border-radius: 10px;
    margin: 0% auto;
}
button{
    background: hsl(47, 88%, 63%);
    font-size: medium;
    font-weight: bold;
    padding:5px;
    border-radius: 7px;
    margin: 3% 0 3% 0%;
    border: none;
}
h6{
    margin: 1% 0 0.5% 0;
    font-size: smaller;
    font-weight: 600;
    color: hsl(0, 2%, 20%);
}
h1{
    font-size: larger;
    font-weight: 900;
}
h1:hover{
    color: hsl(47, 88%, 63%);
    cursor: pointer;
}
p{
    color: hsl(0, 0%, 54%);
    line-height: 22px;
}
/* h2{
    font-size: large;
    font-weight: bolder;
    background-color: blue;
    background-size: auto;
    padding: 7px;
} */
.last >img{
    display: inline;
}
.last >h2{
    display: inline;
    padding-top: 6%;
    padding-left: 4%;
}
.last{
    display: flex;
    flex-direction: row;   
}

@media (min-width:1301px){
    .container{
        width: 35%;
    }
}
@media (min-width:1200px) and (max-width:1300px){
    .container{
        width: 40%;
    }
}
@media (min-width:1000px) and (max-width:1199px){
    .container{
        width: 36%;
    }
}
@media (min-width:700px) and (max-width:999px){
    .container{
        width: 47%;
    }
}
@media (min-width:450px) and (max-width:699px){
    .container{
        width: 60%;
    }
}
@media (max-width:449px){
    .container{
        width: 95%;
    }
}