@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');

:root {
    --primary-color: #9C957C;
    --background-color: #FFF9F4;
}

body {
    font-family: 'Inter', sans-serif;
    letter-spacing: -5%;
    color: var(--primary-color);
    font-weight: semibold;
    line-height: 132%;

    background-color: var(--background-color);
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

/* Typography */
h3 {
    font-size: 15px;

}

h4 {
    font-size: 13px;
}

/* Layout */
header {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 21px;
    z-index: 1000;
}

section#hero {
    display: grid;
    grid-template-rows: 1fr 1fr;
    height: 100dvh;
}

.hero-a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo {
    z-index: 1;
}

.hero-image {
    position: absolute;
    width: 100%;
    height: 100%;

    background-image: url('assets/hero.jpg');
    background-size: cover;
    background-position: top;
}

.hero-b {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.text-container {
    position: relative;
    display: flex;
    justify-content: flex-end;
    height: 100%;
}

.hero-b h3 {
    text-align: end;
    align-self: center;
}

.hero-b h3:nth-child(2) {
    position: absolute;
    bottom: 55px;
}

@media (max-width: 600px) {
    .hero-b h3:nth-child(2) {
        position: absolute;
        bottom: 21px;
    }
}