body {
    background-color: var(--secondary2);
}

h1 {
    font-family: gelica, serif;
    text-align: center;
    font-size: max(8vmin, 3rem);
    color: var(--text2);
    margin-block: 0.5em;
}

section.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
}

section.hero p {
    font-family: brevia, sans-serif;
    font-size: max(3vmin, 1.5rem);
    font-weight: 500;
    color: var(--text2);
    max-width: min(50ch, 90%);
    line-height: 1.3;
    text-align: center;
    margin-bottom: 1em;
}

section.info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8vmin;
    padding: max(5vmin, 50px) 0;
    background: linear-gradient(
        to bottom,
        var(--secondary2) 0%,
        color-mix(in srgb, var(--secondary2) 80%, var(--secondary1)) 100%
    );
}

section.info div.card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

section.info img {
    width: 40vmin;
    aspect-ratio: 4/5;
    object-fit: cover;
    border-radius: 7vmin 0 7vmin 0;
    box-shadow: max(1.5vmin, 10px) max(1.5vmin, 10px) 0 var(--text2);
    margin-bottom: max(5vmin, 30px);
}

section.info h2 {
    font-family: gelica, serif;
    width: fit-content;
    font-size: max(4vmin, 2rem);
    color: var(--text2);
    background-color: var(--primary1);
    margin-bottom: 0.5em;
    padding: 0.3em 0.7em;
    border-radius: 0 0.5em 0 0.5em;
}

section.info a {
    font-family: brevia, sans-serif;
    font-size: max(2vmin, 1rem);
    color: var(--text2);
    margin: 0.3em 0;
    letter-spacing: 0.1em;
    text-decoration: none;
}

@media (max-width: 700px) {
    section.info {
        flex-direction: column;
        gap: 70px;
    }

    section.info img {
        width: min(80%, 400px);
    }
}