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

html {
    width: 100dvw;
    height: 100dvh;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: antiquewhite;
    place-content: center;
    place-items: center;
}

body {
    max-width: 1500px;
    min-width: 250px;
    width: 100%;
    place-content: center;
    place-items: center;
    padding: clamp(.6rem, 2vw, 1rem);
}

main {
    border: 1px solid rgb(148, 126, 97);
    background-color: rgb(255, 225, 186);
    width: 100%;
    min-width: 250px; /* En teoría no es necesario poner esta regla, pero este sería 
    la cantidad de width mínima que debe tener ya que es la de su caja padre, body */
    max-width: 500px;
    min-height: 235px;
    padding: clamp(1rem, 4vw, 1.8rem);
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    text-align: center;
    justify-content: space-between;
}

header{
    h1{
        color: rgb(54, 40, 21);
        text-decoration: underline;
    }
}

article{
    display: flex;
    flex-flow: column nowrap;
    gap: 8px;
    place-content: center;
    place-items: center;
}

button{
    background-color: rgb(54, 40, 21);
    color: white;
    text-decoration: underline;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: clamp(.6rem, 2vw, 1rem);
    border: 1px solid antiquewhite;
    padding-inline: clamp(.4rem, 2vw, .8rem);
    padding-block: clamp(.2rem, 2vw, .4rem);
    cursor: pointer;
    width: 200px;
}

img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}