.image img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 768px) {
    .image img {
        object-fit: cover;
        width: 350px;
        height: 480px;
    }

    .card {
        max-width: 350px;
    }
}

@media screen and (min-width: 769px) {
    .card {
        max-width: 70vw;
        overflow: hidden; /* rounded corner fix for image */
    }

    /* Display card image next to content instead of above */
    .side-by-side {
        display: flex;
    }

    .side-by-side > .card-image {
        width: 40%;
    }

    .side-by-side > .card-content {
        width: 60%;
    }

    /* Fixes rounded corners of image to correspond to card */
    .card-image:first-child img {
        border-start-start-radius: 0;
        border-start-end-radius: 0;
    }
}

@media screen and (min-width: 1024px) {
    .card {
        max-width: 60vw;
    }
}

@media screen and (min-width: 1408px) {
    .card {
        max-width: 50vw;
    }
}