main {
    display: flex;
    flex-direction: column;
    justify-items: center;

    margin-block: 2.55rem 15rem;
    padding-inline: 3rem;
    gap: 4rem;
}

@media screen and (max-width: 1000px) {
    main {
        margin-top: 8rem;
    }
}

@media screen and (max-width: 600px) {
    main {
        margin-top: 5.5rem;
        padding-inline: 1rem;
        gap: 3rem;
        margin-bottom: 8rem;
    }
}

.intro {
    text-align: center;
    display: grid;
    justify-items: center;
    gap: .5rem;

    p {
        max-width: 700px;
    }
}

.block {
    padding-inline: 4rem;
    padding-block: 1rem;

    color: white;
    background: var(--blue-400);
    width: fit-content;
    margin: auto;
}

.small-caps {
    font-family: "neue-kabel", sans-serif;
    font-feature-settings: "smcp" on, "c2sc" on, "ss10" on;
    font-size: var(--fs-700);
    font-weight: 600;

    line-height: .5;
}

.person, .person-reverse {
    display: grid;

    max-width: 1300px;
    width: 100%;
    margin: auto;
}

.person{
    grid-template-columns: clamp(100px, 40%, 390px) auto;
}

.person-reverse{
    grid-template-columns: auto clamp(100px, 40%, 390px);
}

.picture {
    position: relative;
    width: fit-content;

    background-color: var(--blue-400);
    padding: 1rem;
    padding-bottom: 0;
    margin-inline: auto;
}

.will-img,
.jacob-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.will-name {
    display: flex;
    transform: translateY(-1.5rem);

    max-height: 100px;
    width: 80%;
    max-width: fit-content;
    margin-left: auto;
}

.jacob-name{
    display: flex;
    transform: translateY(-1.5rem);

    max-height: 100px;
    margin-left: auto;
}

.bio {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;

    padding-inline: 2rem;
    padding-block: 1rem;
    border-bottom: 5px solid var(--black-600);

    p {
        max-width: 725px;
        line-height: 1.1
    }

}

.email-box {
    display: grid;
    justify-items: center;
    max-width: 800px;
    width: 100%;

    overflow: hidden;
    margin-inline: auto;

    span {
        width: 100%;
        text-align: center;
        padding-block: 10rem;
        padding-inline: 1rem;

        font-family: "neue-kabel", sans-serif;
        font-weight: 700;
        font-style: italic;
        font-size: var(--fs-700);
        font-feature-settings: "ss12" on, "ss14" on;

        color: var(--yellow-400);
        background-color: var(--blue-400);
    }

    i {
        font-family: "sofia-pro", sans-serif;
        font-weight: 200;
        font-size: var(--fs-600);
        font-feature-settings: "ss01" on, "case" on;
    }
}

br {
    display: none;
}

.buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;

    border-top: 3px solid white;

    a {
        border-bottom: 5px solid var(--black-600);
        position: relative;
        background-color: transparent;
        color: black;

        font-family: "neue-kabel", sans-serif;
        font-weight: 700;
        font-size: var(--fs-400);
        font-feature-settings: "ss12" on, "ss14" on;

        text-align: center;
        text-decoration: none;

        overflow: hidden;
        cursor: pointer;
        padding-block: .75rem;
        transition: color .5s ease;
    }

    a::after {
        transform: translateX(100%);
        content: "";
        background-color: var(--black-600);

        z-index: -1;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        transition: transform .5s ease;
    }

    a:hover,
    a:active,
    a:focus {
        color: white;
    }

    a:hover::after,
    a:active::after,
    a:focus::after {
        transform: translateX(0);
    }
}

.policy{
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-inline: auto;

    max-width: 1000px;

    *{
        line-height: 1.2;
    }

    p, h2{
        margin-bottom: 1ch;
    }

    li{
        margin-left: 3rem;
    }

    a{
        position: relative;
        
        display: inline flex;
        width: fit-content;
        z-index: 3;
        overflow-x: clip !important;
        padding-bottom: .16em;

        font-family: "sofia-pro", sans-serif;
        font-variant-alternates: styleset(alt-chars);
        font-feature-settings: "ss01" on, "case" on;
        line-height: 1;
        font-size: var(--fs-400);

        color: black;
        text-decoration-color: black;
        overflow: hidden;

        transition: color .5s ease;
    }

    a::after{
        content: "";
        color: white;
        transform: translateX(101%);
        background-color: black;
        transition: transform .5s ease;

        z-index: -1;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
    }

    a:hover,
    a:active,
    a:focus{
        color: white;
        text-decoration-color: black;
    }

    a:hover::after,
    a:active::after,
    a:focus::after{
        transform: translateX(0);
    }
}

@media screen and (max-width: 800px) {
    .bio p {
        font-size: var(--fs-300);
        line-height: 1.1;
    }

    .email-box span {
        font-size: 5.5vi;
    }

    .email-box i {
        font-size: 4.4vi
    }
}

@media screen and (max-width: 600px) {
    .block {
        padding-inline: 2rem;
    }

    .small-caps {
        font-size: var(--fs-600);
    }

    .email-box {
        max-width: 500px;

        span {
            padding-block: 5rem;
        }
    }


    .person{
        grid-template-columns: 1fr;
    }

    .person-reverse{
        display: flex;
        flex-direction: column-reverse;
    }

    .will-img,
    .jacob-img {
        max-width: 300px;
        margin-inline: auto;
    }

    .will-name,
    .jacob-name {
        margin-inline: auto;
    }

    .bio {
        flex-direction: column;

        padding-block: 1rem;
        padding-inline: 0;
        border: 0;

        p {
            padding-inline: 1rem;
        }
    }

    .bio::after {
        display: flex;
        content: "";
        background-color: var(--black-600);
        height: 4px;
        width: 100%;
        max-width: 358px;
        margin-inline: auto;
        margin-top: 2rem;
    }

    .buttons {
        grid-template-columns: 1fr;

        a {
            font-size: var(--fs-300);
            border-width: 4px;
        }
    }

    .policy {
        gap: 2rem;

        h2{
            text-align: center;
            text-wrap: balance;
        }

        ul{
            margin-left: 0rem;
        }

        a{
            font-size: var(--fs-300);
        }

        p{
            margin-bottom: 1.5rem;
        }
    
        *{
            line-height: 1.3;
        }
    }
}

@media screen and (max-width: 400px) {
    .will-img, .jacob-img{
        max-width: 250px;
    }
    
    .small-caps {
        font-size: var(--fs-550)
    }

    .policy a{
        font-size: var(--fs-200);
    }

    .bio {
        flex-direction: column;

        padding-block: 2rem 1rem;
        padding-inline: 0;
        border: 0;

        p {
            padding-inline: 1rem;
            font-size: var(--fs-200);
        }
    }

    .bio::after {
        display: flex;
        content: "";
        background-color: var(--black-600);
        height: 4px;
        width: 100%;
        max-width: 250px;
        margin-inline: auto;
        margin-top: 2rem;
    }
}