@import url('https://fonts.googleapis.com/css2?family=Mulish&display=swap');

.title {
    font-family: 'Mulish', sans-serif;
}
.sample {
    border: 0;
    border-radius: 10px;
    display: inline-block;
    position: relative;
    -webkit-filter: drop-shadow(12px 12px 12px rgb(126, 126, 126));
    filter: drop-shadow(12px 12px 12px rgb(126, 126, 126));

    padding-bottom: 8px;
}

    .sample img {
        display: block;
        border-radius: 4px;
    }

    .sample.left, .sample.right {
        width: 40%;
        max-width: 10rem;
    }

        .sample.left img, .sample.right img {
            width: 100%;
        }

    .sample.left {
        float: left;
        margin: 0 1.5rem 1rem 0;
        top: 0.25rem;
    }

    .sample.right {
        float: right;
        margin: 0 0 1rem 1.5rem;
        top: 0.25rem;
    }

    .sample.fit {
        display: block;
        margin: 0 0 2rem 0;
        width: 100%;
    }

        .sample.fit img {
            width: 100%;
        }

    .sample.main {
        display: block;
        margin: 0 0 3rem 0;
        width: 100%;
    }

        .sample.main img {
            width: 100%;
        }

.spacer {
    padding: 4rem;
    border: none;
}

.contact-info {
    font-style: normal;
}

.email {
    text-decoration: underline;
    box-shadow: inset 0 0 0 0 #708090;
    color: #708090;
    margin: 0 -.25rem;
    padding: 0 .25rem;
    transition: color .25s ease-in-out, box-shadow .25s ease-in-out;
}

.email:hover {
    box-shadow: inset 180px 0 0 0 #708090;
    color: white;
}

.hidden {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .email:hover {
        box-shadow: inset 0 0 0 0 #708090;
        color: #708090;
    }
  }

@media only screen and (max-width: 1280px) {
    .sample {
        border-radius: 4px;
        object-fit: contain;
        width: 80%;
        height: auto;
        -webkit-filter: drop-shadow(6px 6px 6px rgb(126, 126, 126));
        filter: drop-shadow(6px 6px 6px rgb(126, 126, 126));
    }

  }