// This file handles image layout and their containing boxes.

.info-image,
.mw-default-size {
    display: flex;
    flex-direction: column;
    align-items: center;

    max-width: 360px;

    padding-left: calc(var(--space));
    padding-right: calc(var(--space));
    padding-top: calc(var(--space));

    margin-bottom: var(--space);

    border: 3px solid;
    border-image: linear-gradient(90deg, var(--gold-3), transparent 30%, transparent 70%, var(--gold-3)) 30;

    background-image: repeating-conic-gradient(from 45deg at 50% 50%, transparent 25% 50%, var(--gold-2) 50% 75%);
    @media (prefers-color-scheme: dark) {
        background-image: repeating-conic-gradient(from 45deg at 50% 50%, transparent 25% 50%, var(--blue-2) 50% 75%);
    }

    background-clip: padding-box;
    background-size: 18px 18px;
    background-position: 50% 100%;
    box-sizing: border-box;
}

.info-image figcaption,
.mw-default-size figcaption {
    text-align: center;
    font-style: italic;
    padding-bottom: var(--space);
    font-family: 'Shippori Mincho';

    @media (prefers-color-scheme: dark) {
        color: var(--gold-1);
    }
}

.info-image img,
.mw-default-size img {
    max-width: 100%;
    height: auto;
}

.mw-halign-right {
    float: right;
    margin-left: var(--space);
}

.mw-halign-left {
    float: left;
    margin-right: var(--space);
}

.mw-halign-none,
.mw-halign-center {
    margin: auto;
}


@media (min-width: 1201px) {

}

@media (max-width: 1200px) {
    .mw-default-size,
    .info-image {
        max-width: 360px;
    }
}

@media (max-width: 720px) {

    .mw-default-size,
    .info-image {
        max-width: unset;
        width: auto;
        float: unset;
        margin-right: 0;
    }

}