/* WordPress Alignment
-------------------------------------------------------------------*/
img.alignright {
    float: right;
    margin-left: 1em;
    margin-bottom: 1em;
}

img.alignleft {
    float: left;
    margin-right: 1em;
    margin-bottom: 1em;
}

.alignnone,
.aligncenter,
.alignleft,
.alignright {
    max-width: 100%;
    height: auto;
}


/* Effects
-------------------------------------------------------------------*/
.img-greyscale {
    filter: grayscale(1);
    transition: filter .3s ease-in-out;
}

.img-greyscale:hover {
    filter: grayscale(0);
}


/* Gallery and Grid Images
-------------------------------------------------------------------*/
img.page-gallery {
    width: 100%;
    max-width: 100%;
    min-height: 250px;
    max-height: 250px;
    object-fit: cover;
}

@media screen and (max-width: 768px) {
    img.page-gallery {
        min-height: 150px;
        max-height: 150px;
    }
}

img.grid-image,
img.weekly-deals {
    width: 100%;
    max-width: 100%;
    min-height: 400px;
    max-height: 400px;
    object-fit: cover;
}


/* Featured Image Frame (templates/part-featured-image.php)
   Ratio and fit are set per use through modifier classes.
-------------------------------------------------------------------*/
.featured-image {
    --featured-ratio: 4 / 3;
    aspect-ratio: var(--featured-ratio);
    overflow: hidden;
    background-color: var(--light-grey);
}

.featured-image--1x1 {--featured-ratio: 1 / 1;}
.featured-image--4x3 {--featured-ratio: 4 / 3;}
.featured-image--3x2 {--featured-ratio: 3 / 2;}
.featured-image--16x9 {--featured-ratio: 16 / 9;}
.featured-image--21x9 {--featured-ratio: 21 / 9;}

.featured-image a {
    display: block;
    height: 100%;
}

.featured-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.featured-image--contain img {
    object-fit: contain;
}