.set-details {
    display: grid;
    gap: 0 1rem;
    grid-template-areas:
        "items preview"
        "summary preview";
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.set-details__items {
    grid-area: items;
    min-width: 0;
}

.set-details__preview {
    align-self: start;
    grid-area: preview;
}

.set-details__summary {
    grid-area: summary;
    min-width: 0;
}

.set-equipment-preview {
    position: relative;
    width: 152px;
    height: 204px;
    margin: 0 auto;
}

.set-equipment-preview__base {
    display: block;
    width: 152px;
    height: 204px;
}

.set-equipment-preview__slot {
    position: absolute;
    z-index: 1;
    display: block;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    line-height: 0;
}

.set-equipment-preview__slot--necklace,
.set-equipment-preview__slot--ring_left {
    left: 7px;
}

.set-equipment-preview__slot--head,
.set-equipment-preview__slot--body,
.set-equipment-preview__slot--legs,
.set-equipment-preview__slot--feet {
    left: 53px;
}

.set-equipment-preview__slot--ring_right,
.set-equipment-preview__slot--belt {
    left: 99px;
}

.set-equipment-preview__slot--necklace,
.set-equipment-preview__slot--head {
    top: 19px;
}

.set-equipment-preview__slot--body {
    top: 63px;
}

.set-equipment-preview__slot--ring_left,
.set-equipment-preview__slot--legs,
.set-equipment-preview__slot--ring_right {
    top: 107px;
}

.set-equipment-preview__slot--feet,
.set-equipment-preview__slot--belt {
    top: 151px;
}

.set-equipment-preview__container {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    display: block;
    width: 44px;
    height: 44px;
    max-width: none;
    margin: 0;
    padding: 0;
}

.set-equipment-preview__slot--belt .set-equipment-preview__container {
    width: 41px;
}

.set-equipment-preview__slot--ring_left .set-equipment-preview__container,
.set-equipment-preview__slot--ring_right .set-equipment-preview__container {
    width: 43px;
}

.set-equipment-preview__item {
    position: absolute;
    z-index: 2;
    top: 6px;
    left: 6px;
    display: block;
    width: 32px;
    height: 32px;
    max-width: none;
    margin: 0;
    padding: 0;
    object-fit: contain;
}

@media screen and (max-width: 700px) {
    .set-details {
        grid-template-areas:
            "items"
            "preview"
            "summary";
        grid-template-columns: minmax(0, 1fr);
    }
}