:root {
 /* global color variables */

    --clr-hsl-primary-500: 200, 95%, 14%;
    --clr-hsl-primary-400: 192, 70%, 43%;
    --clr-hsl-primary-300: 199, 64%, 73%;
    --clr-hsl-accent-500: 32, 100%, 98%;
    --clr-hsl-accent-400: 43, 100%, 51%;
    --clr-hsl-neutral-900: 0, 0%, 4%;
    --clr-hsl-neutral-500: 0, 0%, 20%;
    --clr-hsl-neutral-100: 0, 0%, 96%;

    --clr-primary-500: hsl(var(--clr-hsl-primary-500));
    --clr-primary-400: hsl(var(--clr-hsl-primary-400));
    --clr-primary-300: hsl(var(--clr-hsl-primary-300));
    --clr-accent-500: hsl(var(--clr-hsl-accent-500));
    --clr-accent-400: hsl(var(--clr-hsl-accent-400));
    --clr-neutral-900: hsl(var(--clr-hsl-neutral-900));
    --clr-neutral-500: hsl(var(--clr-hsl-neutral-500));
    --clr-neutral-100: hsl(var(--clr-hsl-neutral-100));

 /* global font variables */

    --ff-primary: 'Ysabeau', sans-serif;
    --fw-primary-400: 100;

    --ff-secondary: 'Fraunces', serif;
    --fw-secondary-800: 800;

    --fs-400: 1.125rem;
    --fs-500: 1.25rem;
    --fs-600: 1.5rem;
    --fs-700: 1.75rem;
    --fs-800: 2rem;
    --fs-900: 5rem;
}


* {
    margin: 0px;
    font: inherit;
}

*,
*::after,
*::before {
    box-sizing: border-box;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

canvas,
img,
picture,
svg,
video {
    display: block;
    max-width: 100%;
}

html {
    height: min(100vh);
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    background-image: linear-gradient(-60deg, var(--clr-primary-500), var(--clr-primary-400));
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--clr-neutral-100);
    font-family: var(--ff-primary);
    font-weight: var(--fw-primary-400);
    font-size: var(--fs-700);
}

main {
    min-width: 250px;
    height: min(90dvh);
}

h2 {
    font-family: var(--ff-secondary);
    font-weight: var(--fw-secondary-800);
    font-size: var(--fs-800);
    text-transform: uppercase;
    margin: 15px 0px 10px 0px;
}

.wrapper {
    width: min(100dvw - 3rem, 55ch);
    margin: auto;
}

.hero {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%),1fr));
    gap: 1.5rem;
    margin: 3rem auto;
    align-items: center;
    border-bottom: 1px solid hsla(var(--clr-hsl-neutral-100), 0.3);
    box-shadow: 0px 45px 30px -30px hsla(var(--clr-hsl-neutral-900), 0.65);
}

.hero-image {
    min-width: 15rem;
    max-width: 65%;
    max-height: 100%;
}

@media only screen and (max-width: 672px) {
    :root {
        --fs-400: 1rem;
        --fs-500: 1.125rem;
        --fs-600: 1.25rem;
        --fs-700: 1.5rem;
        --fs-800: 1.75rem;
        --fs-900: 2rem;
    }

    .hero {
        margin: 0.5rem auto;
    }

}

@media only screen and (max-width: 425px) {
    :root {
        --fs-400: 0.875rem;
        --fs-500: 0.875rem;
        --fs-600: 0.875rem;
        --fs-700: 1rem;
        --fs-800: 1.125rem;
        --fs-900: 1.5rem;
    }

    main {
        position: absolute;
        width: max(100vw);
        left: 0;
    }

    .hero {
        margin: 0;
    }

    .hero img {
        position: relative;
        bottom: -1.5rem;
    }

    .hero div {
        border-top: 1px solid hsla(var(--clr-hsl-neutral-100), 0.3);
        background-color: var(--clr-primary-500);
        padding: 0.5rem 2rem 1.5rem;
    }
}