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

/* @group @variables */

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

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

[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;
}

[class*="a-aspect-ratio-320-233"] {
--aspect-ratio: 320 / 233;
}

/* @end @variables */

/* @group @a-aspect-ratio */

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

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

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

/* @end @a-aspect-ratio */
/* -------------------------------------------------------- */

/* @group @variables */

[class*="a-media-grid"] {
--grid-align-items: start;
--grid-template-columns: repeat(1, 1fr);
--grid-gap: 2.25rem;
}

[class*="a-media-grid-segundo"] {
--grid-gap: 1.5rem;
}

@media (width >= 48em) { /* 768px -> * */

[class*="a-media-grid-secondary"],
[class*="a-media-grid-segundo"]  {
--grid-template-columns: repeat(2, 1fr);
}

}

/* @end @variables */

/* @group @a-media-grid */

[class*="a-media-grid"] {
display: grid;
align-items: var(--grid-align-items);
grid-template-columns: var(--grid-template-columns);
gap: var(--grid-gap);
order: var(--grid-order);
direction: var(--grid-direction);
}

:where([class*="a-media-grid"])>* {
overflow: clip;
display: contents;
direction: ltr;
}

:where([class*="a-media-grid"]) img {
width: 100%;
}

/* @end @a-media-grid */

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

/* @group @a-media-primary */

[class*="a-media-primary"] {
border: 1px solid var(--border-color);
}

:where([class*="a-media-primary"]) img {
width: 100%;
}

[class*="a-media-primary"],
:where([class*="a-media-primary"]) img {
border-radius: var(--media-border-radius);
}

/* @end @a-media-primary */

/* @group @a-media-secondary */

[class*="a-media-secondary"] {
border: 1px solid var(--border-color);
}

:where([class*="a-media-secondary"]) img {
width: 100%;
}

/* @end @a-media-secondary */

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

/* @group @variables */

[class*="a-media-radius"] {
--media-border-radius: .375rem;
}

[class*="a-media-radius"] {
--media-border-radius: .375rem;
}

[class*="a-media-radius"] {
--media-border-radius: .375rem;
}

/* @end @variables */

/* @group @a-media-radius */

[class*="a-media-radius"],
:where([class*="a-media-radius"]) img {
border-radius: var(--media-border-radius);
}

[class*="a-media-radius-secondary"] {
border: 1px solid var(--border-color);
}

/* @end @a-media-radius */

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