/*
    Layout
*/
.webmail-page-layout {
    margin-top: 6rem;
}


/*
    General Block Styling
*/
.info-block {
    max-width: 78rem;
    padding: 3rem 2rem;
    color: var(--color-on-service-block);
    background-color: var(--color-service-block);
    margin: 2rem auto;
}

.info-block figure,
.info-block img {
    height: 100%;
    width: 100%;
}


/*
    Backgrounds
*/
.-bg-gradient-1 {
    background: linear-gradient(to bottom right, #ffe7dd, #c4dcff);
}

.-bg-gradient-2 {
    background: linear-gradient(to bottom, #ddebff, var(--color-service-block));
}

.-bg-gradient-3 {
    background: linear-gradient(to bottom, var(--color-service-block), #ddebff);
}

.-bg-gradient-4 {
    background: linear-gradient(to bottom, #c4dcff, #ffede6);
}


/*
    Heading Block
*/
.info-block.-heading {
    text-align: center;
}

.info-block.-heading h1 {
    font-size: 2.5rem;
    font-weight: var(--font-weight-bold);
}

.info-block.-heading p {
    margin-top: 2rem;
    font-size: 1.25rem;
}


/*
    Content Block Shared Styles
*/
.info-block.-block-1 h2,
.info-block.-block-2 h2,
.info-block.-block-3 h2,
.info-block.-block-4 h2 {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
}

.info-block.-block-1 p,
.info-block.-block-2 p,
.info-block.-block-3 p,
.info-block.-block-4 p,
.info-block.-block-5 p {
    font-size: 1.125rem;
}

.info-block.-block-1 .info-block__paragraphs,
.info-block.-block-2 .info-block__paragraphs,
.info-block.-block-3 .info-block__paragraphs,
.info-block.-block-4 .info-block__paragraphs {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.info-block.-block-2 .info-block__paragraphs,
.info-block.-block-3 .info-block__paragraphs,
.info-block.-block-4 .info-block__paragraphs,
.info-block.-block-5 .info-block__paragraphs {
    margin-top: 1.5rem;
}

.info-block.-block-2,
.info-block.-block-3 {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 3.5rem;
}

.info-block.-block-2 .info-block__texts,
.info-block.-block-3 .info-block__texts,
.info-block.-block-4 .info-block__texts {
    grid-area: texts;
}

.info-block.-block-2 .info-block__media,
.info-block.-block-3 .info-block__media,
.info-block.-block-4 .info-block__media {
    grid-area: media;
}

.info-block.-block-2 figure,
.info-block.-block-3 figure {
    max-width: 28rem;
    margin: 0 auto;
}


/*
    Block Style 1
*/
.info-block.-block-1 {
    text-align: left;
}

.info-block.-block-1 h2,
.info-block.-block-1 p {
    max-width: 52rem;
    margin-left: auto;
    margin-right: auto;
}

.info-block.-block-1 .info-block__paragraphs {
    margin-top: 2rem;
}

.info-block.-block-1 .info-block__media {
    max-width: 54rem;
    margin: 1rem auto 0 auto;
}


/*
    Block Style 2 and 3
*/
.info-block.-block-2,
.info-block.-block-3 {
    grid-template-areas:
        'texts'
        'media'
    ;
}

.info-block.-block-2 a,
.info-block.-block-3 a {
    margin-top: 1.75rem;
    width: fit-content;
}


/*
    Block Style 4
*/
.info-block.-block-4 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        'media'
        'texts'
    ;
    row-gap: 3rem;
    text-align: left;
}

.info-block.-block-4 .info-block__media {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

.info-block.-block-4 .info-block__media figure {
    max-width: 3rem;
}


/*
    Block Style 5
*/
.info-block.-block-5 {
    text-align: left;
}

.info-block.-block-5 h2 {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
}

.info-block.-block-5 .info-block__paragraphs {
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}


/*
    Block Style 6 and 7
*/
.info-block.-block-6 {
    display: grid;
    justify-items: center;
    grid-template-columns: 1fr;
    row-gap: 4rem;
    column-gap: 2rem;
}

.info-block.-block-7 {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 4rem;
    column-gap: 2rem;
}

.info-block.-block-6 article,
.info-block.-block-7 article {
    max-width: 14rem;
    text-align: center;
}

.info-block.-block-6 article figure,
.info-block.-block-7 article figure {
    height: 3.5rem;
    max-width: 5rem;
    margin: 0 auto;
}

.info-block.-block-6 article h2,
.info-block.-block-7 article h2 {
    margin-top: 2rem;
    font-size: 1.25rem;
    font-weight: var(--font-weight-bold);
}

.info-block.-block-6 article p,
.info-block.-block-7 article p {
    margin-top: .5rem;
    font-size: 1rem;
}

@media (min-width: 660px) {
    .info-block.-block-6 {
        row-gap: 3rem;
        grid-template-columns: repeat(2, 1fr);
    }

    .info-block.-block-7 {
        row-gap: 3rem;
        column-gap: 3rem;
    }
}

@media (min-width: 1100px) {
    .info-block.-block-6 {
        grid-template-columns: repeat(4, 1fr);
    }
}


/*
    Block Style 8
*/
.info-block.-block-8 {
    font-size: 1.25rem;
}

.info-block.-block-8 .info-block__paragraphs {
    max-width: 50rem;
    margin-left: auto;
    margin-right: auto;
}


/*
    Block Style 9
*/
.info-block.-block-9 {
    font-size: 1.25rem;
    text-align: center;
}

.info-block.-block-9 h2 {
    max-width: 50rem;
    margin: 0 auto;
}

.info-block.-block-9 a {
    width: fit-content;
    margin: 2rem auto 0 auto;
}


@media (min-width: 800px) {
    /*
        Layout
    */
    .webmail-page-layout {
        padding: 0 min(3vw, 3rem);
    }


    /*
        General Block Styling
    */
    .info-block {
        border-radius: .75rem;
        padding: 5rem;
    }


    /*
        Heading Block
    */
    .info-block.-heading h1 {
        font-size: 3.75rem;
    }


    /*
        Content Block Shared Styles
    */
    .info-block.-block-1 h2,
    .info-block.-block-2 h2,
    .info-block.-block-3 h2,
    .info-block.-block-4 h2 {
        font-size: 2rem;
    }

    .info-block.-block-2,
    .info-block.-block-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .info-block.-block-2 figure,
    .info-block.-block-3 figure {
        max-width: unset;
    }


    /*
        Block Style 1
    */
    .info-block.-block-1 {
        text-align: center;
    }


    /*
        Block Style 2
    */
    .info-block.-block-2 {
        grid-template-areas: 'media texts';
    }


    /*
        Block Style 3
    */
    .info-block.-block-3 {
        grid-template-areas: 'texts media';
    }


    /*
        Block Style 4
    */
    .info-block.-block-4 {
        row-gap: 4rem;
        text-align: center;
    }

    .info-block.-block-4 .info-block__media {
        gap: 3rem;
    }

    .info-block.-block-4 .info-block__media figure {
        max-width: 5rem;
    }


    /*
        Block Style 5
    */
    .info-block.-block-5 {
        text-align: center;
    }

    .info-block.-block-5 h2 {
        font-size: 2.25rem;
    }


    /*
        Block Style 8
    */
    .info-block.-block-8 {
        font-size: 1.5rem;
        text-align: center;
    }


    /*
        Block Style 9
    */
    .info-block.-block-9 {
        font-size: 1.75rem;
    }
}


@media (min-width: 1200px) {
    /*
        Layout
    */
    .webmail-page-layout {
        margin-top: 10rem;
    }
}