@media screen and (min-width: 901px) {
    /**** cover ****/
    #cover {
        /* display */
        width: 100%;
        height: 100vh;

        /* background */
        background-image: url("img/pexels-cottonbro-studio-4100661.jpg");
        background-position: left;
        background-repeat: no-repeat;
        background-size: cover;
    }

    #cover .content {
        /* display */
        justify-content: end;
        text-align: left;
    }

    #cover .split-50-50 {
        /* display */
        margin-bottom: 80px;
    }

    /**** mailing list ****/
    #subscribe {
        /* display */
        max-width: 500px;
        margin: 15px 0;
        padding: 10px;
        display: grid;
        grid-template-columns: auto auto;

        /* appearance */
        background-color: #ffffff;
        border-radius: 15px;
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
    }

    #subscribe label {
        /* display */
        text-align: center;
        font-weight: 700;
        color: #000000;
    }

    #subscribe input:not(#submit) {
        /* display */
        height: 20px;
        padding: 5px 10px;
        margin: 5px;

        /* appearance */
        color: #000000;
        background-color: #cecece;
        font-size: 12px;
        border-width: 0;
        border-radius: 5px;
    }

    #submit {
        /* display */
        display: block;
        margin: 10px auto;
        padding: 10px 25px;
        grid-column: 1/3;
        cursor: pointer;

        /* appearance */
        border-radius: 5px;
        border-width: 0;

        /* content */
        font-weight: 600;
        font-size: 14px;
        background-color: rgba(49, 227, 203, 0.2);
        color: #30e3ca;

        /* animations */
        transition: background-color 200ms ease-out;
    }

    #submit:hover {
        /* content */
        background-color: rgba(49, 227, 203, 0.4);
    }

    /**** other ****/
    #other {
        /* display */
        display: grid;
        grid-template-columns: calc(50% - 5px) calc(50% - 5px);
        grid-template-rows: 50px auto;
        gap: 10px;
        width: 100%;
        padding: 10px;
        margin-bottom: 15px;

        /* appearance */
        background-color: #ffffff;
        border-radius: 15px;
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
        text-align: center;
    }

    #other h4 {
        /* display */
        height: 50px;
    }

    .link {
        /* animations */
        transition: opacity 300ms ease-out;
    }

    .link:hover {
        /* appearance */
        opacity: 0.6;

        /* animations */
        transition: opacity 300ms ease-out;
    }

    .link div {
        /* display */
        height: 100%;

        /* appearance */
        color: #ffffff;
        border-radius: 10px;
        text-align: right;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }

    .link .img-overlay-right {
        /* display */
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .link h4 {
        /* display */
        padding: 20px;
    }

    #link-1 {
        /* appearance */
        background-image: url("img/multicare.png");
    }

    #link-2 {
        /* appearance */
        background-image: url("img/uw-tacoma.png");
    }
}

@media screen and (max-width: 900px) {
    /**** cover ****/
    #cover {
        /* display */
        width: 100%;
        height: 100vh;

        /* background */
        background-image: url("img/pexels-cottonbro-studio-4100661.jpg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    #cover .content {
        /* display */
        justify-content: end;
        text-align: left;
    }

    #cover .split-50-50 {
        /* display */
        margin-bottom: 80px;
    }

    /**** mailing list ****/
    #subscribe {
        /* display */
        max-width: 500px;
        margin: 15px 0;
        padding: 10px;
        display: grid;
        grid-template-columns: auto auto;

        /* appearance */
        background-color: #ffffff;
        border-radius: 15px;
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
    }

    #subscribe label {
        /* display */
        text-align: center;

        /* appearance */
        font-weight: 700;
        color: #000000;
    }

    #subscribe input:not(#submit) {
        /* display */
        height: 20px;
        width: calc(100% - 30px);
        padding: 5px 10px;
        margin: 5px;

        /* appearance */
        color: #000000;
        background-color: #cecece;
        font-size: 12px;
        border-width: 0;
        border-radius: 5px;
    }

    #submit {
        /* display */
        display: block;
        margin: 10px auto;
        padding: 10px 25px;
        grid-column: 1/3;
        cursor: pointer;

        /* appearance */
        border-radius: 5px;
        border-width: 0;

        /* content */
        font-weight: 600;
        font-size: 14px;
        background-color: rgba(49, 227, 203, 0.2);
        color: #30e3ca;

        /* animations */
        transition: background-color 200ms ease-out;
    }

    #submit:hover {
        /* content */
        background-color: rgba(49, 227, 203, 0.4);
    }

    /**** other ****/
    #other {
        /* display */
        display: grid;
        grid-template-columns: calc(50% - 5px) calc(50% - 5px);
        grid-template-rows: 50px auto;
        gap: 10px;
        width: calc(100% - 20px);
        padding: 10px;
        margin-bottom: 15px;

        /* appearance */
        background-color: #ffffff;
        border-radius: 15px;
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
        text-align: center;
    }

    #other h4 {
        /* display */
        height: 50px;
    }

    .link {
        /* animations */
        transition: opacity 300ms ease-out;
    }

    .link:hover {
        /* appearance */
        opacity: 0.6;

        /* animations */
        transition: opacity 300ms ease-out;
    }

    .link div {
        /* display */
        height: 100%;

        /* appearance */
        color: #ffffff;
        border-radius: 10px;
        text-align: right;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }

    .link .img-overlay-right {
        /* display */
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .link h4 {
        /* display */
        padding: 20px;
    }

    #link-1 {
        /* appearance */
        background-image: url("img/multicare.png");
    }

    #link-2 {
        /* appearance */
        background-image: url("img/uw-tacoma.png");
    }
}