.image-card {
    display: flex;
    flex-direction: column;
    width: auto;
    max-height: 75vh;
    max-width: 100%;
    padding: 10px 20px;
    background-image: linear-gradient(to bottom, var(--primary-color) 50%, var(--image-card-bottom-color));
    border-style: solid;
    border-width: 1px;
    border-color: var(--secondary-color);
    font-size: 20px;
}
.image-card p {
    text-align: left;
}
.image-card img {
    margin: 2% 5% 1%;
    border-style: solid;
    border-width: 1px;
    border-color: var(--image-card-bottom-color);
    width: auto;
    max-height: 97%;
}
.image-card .vert-img {
    max-height: 99%;
}
.image-card .caption {
    font-size: 16px;
    text-align: right;
}
.image-nav-buttons {
    position: absolute;
    bottom: 30px;
    display: flex;
    align-items: row;
}
.image-nav-buttons .icon {
    filter: url(#fill-primary-color-bottom);
}
/* For tall screens */
@media screen and (max-width: 500px) {
    .image-card .caption {
        font-size: 14px;
    }
    .image-card {
        max-width: 90%;
    }
}
/* For mobile devices */
@media (pointer: coarse) {
    :root {
      --primary-color-bottom: var(--secondary-color);
    }
    .dark-mode {
      --primary-color-bottom: var(--secondary-color);
    }
}