@media (min-width: 48em) {
    :root {
         --btn-padding-horizontal: clamp(3rem, 12vw, 5rem);
    }

    body {
        background-image: url('../images/bg-desktop.svg');
        background-size: cover;
        padding: var(--space-xl);
    }
    
    main {
        flex-direction: row;
        align-items: center;
        gap: clamp(2rem, 6vw, 4rem);
    }
    
    .content {
        flex: 1;
        text-align: left;
        gap: var(--space-lg);
    }
    
    .illustration {
        flex: 1.2;
    }

    h1 {
      font-size: var(--font-size-heading-tablet);
    }

    .register-btn {
        align-self: flex-start;
    }

    footer {
        align-items: flex-end;
        gap: var(--space-xl);
    }
}

@media (min-width: 90em) {
    .container {
        max-width: 90rem;
    }
    
    body {
        padding: var(--space-xxl) clamp(3rem, 10vw, 6rem);
    }

    h1 {
      font-size: var(--font-size-heading-desktop);
      padding-inline-end: clamp(5rem, 12vw, 10rem);
    }
    
    p {
        max-width: 90%;
    }
}