body {
     background-image: url("../images/paper.jpg");
     font-family: "Garamond", serif;
     text-align: center;
     padding: clamp(2rem, 10vw, 10rem);
     font-size: clamp(1.2rem, 2vw, 1.6rem);
}

.wrapper {
    max-width: 80rem;
    margin-inline: auto;
}

h1 {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-family: "Garamond-Light", serif;
    font-weight: 200;
}

h2 {
    max-width: 30rem;
    margin-inline: auto;
    font-family: "WorkSans", sans-serif;
    text-transform: uppercase;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    line-height: 1.2;
}

p {
    line-height: 1.5;
    max-width: 42rem;
    margin-inline: auto;
}

hr {
    border: 1px solid #000;
    width: clamp(10rem, 20vw, 15rem);
}

hr.long {
    width: 100%;
}

.logo {
    margin-inline: auto;
    width: clamp(3rem ,8vw, 8rem);
    height: auto;
    margin-top: 2rem;
}

h1 {
    padding-block: 5rem 3rem;
}

.hero .box {
   border: 1px solid #000;
   margin-bottom: 10rem;
   padding: 2rem;
   height: clamp(400px, 80vh, 800px);
   display: flex;
   flex-direction: column;
   justify-content: center;
}

p span {
    font-family: "Garamond-Italic", serif;
    font-style: italic;
}

p a {
    text-decoration: none;
}

.box img {
    width: 100%;
    height: auto;
    max-width: 500px;
    margin-inline: auto;
    margin-bottom: 20px;
    object-fit: cover;
}

@media (min-width: 600px) {
    .box img {
        aspect-ratio: 2/2;
        max-width: 400px;
        object-position: center;
    }
}

.button {
    border: 1px solid black;
    text-decoration: none;
    padding: 10px 20px;
}