/* aspect-ratio -------------------------------------------------------- */

/* @group @variables */

[class*="a-aspect-ratio-16-9"],
[class*="a-aspect-ratio-zoom-16-9"] {
--aspect-ratio: 16 / 9;
}

[class*="a-aspect-ratio-4-3"],
[class*="a-aspect-ratio-zoom-4-3"] {
--aspect-ratio: 4 / 3;
}

[class*="a-aspect-ratio-3-4"],
[class*="a-aspect-ratio-zoom-3-4"] {
--aspect-ratio: 3 / 4;
}

[class*="a-aspect-ratio-1-1"],
[class*="a-aspect-ratio-zoom-1-1"] {
--aspect-ratio: 1 / 1;
}

/* @end @variables */

/* @group @aspect-ratio */

[class*="a-aspect-ratio"] {
overflow: hidden;
aspect-ratio: var(--aspect-ratio);
}

[class*="a-aspect-ratio-zoom"] {
overflow: visible;/* vanilla-zoomなど使う時にはoverflow: hiddenは外す */
}

[class*="a-aspect-ratio"] iframe,
[class*="a-aspect-ratio"] img {
width: 100%;
height: 100%;
aspect-ratio: var(--aspect-ratio);
transition: var(--transition);
object-fit: cover;
object-position: center center;
}

/* @end @aspect-ratio */

/* -------------------------------------------------------- */

/* @group @a-classification-media */

a:hover [class*="a-attachment-media"] img {
transition: var(--transition);
}

a:hover [class*="a-attachment-media"] img,
a:focus [class*="a-attachment-media"] img {
transform: scale(1.05);
}

/* @end @a-classification-media */

/* -------------------------------------------------------- */

/* @group @m-media-grayscale */

[class*="m-media-grayscale"] img,
[class*="a-media-grayscale"] {
filter: saturate(.5) opacity(.75) grayscale(1);
}

a:hover [class*="m-media-grayscale"] img,
a:focus [class*="m-media-grayscale"] img,
a:hover [class*="a-media-grayscale"],
a:focus [class*="a-media-grayscale"] {
filter: saturate(1) opacity(1) grayscale(0);
}

/* @end @m-media-grayscale */