.related-swiper {
    &:not(.swiper-initialized) {
        .swiper-wrapper {
            width: 100%;
            display: grid;
            gap: 15px;
            grid-auto-flow: column;
            grid-auto-columns: calc((100% - 15px) / 1.5);

            @media (min-width: 640px) {
                grid-auto-flow: row;
                grid-auto-columns: unset;
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            @media (min-width: 1025px) {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }

            @media (min-width: 1160px) {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }

            @media (min-width: 1440px) {
                gap: 32px;
                grid-template-columns: repeat(4, minmax(0, 1fr));
            }
        }
    }
}

.reco-template-category,
.reco-template-content-category {
    .related-swiper {
        &:not(.swiper-initialized) {
            .swiper-wrapper {
                grid-auto-columns: calc((100% - (15px * 1.5)) / 2.5);
            }
        }
    }
}

.reco-template-content-category {
    .related-swiper {
        &:not(.swiper-initialized) {
            .swiper-wrapper {
                @media (min-width: 640px) {
                    grid-template-columns: repeat(2, minmax(0, 1fr));
                }

                @media (min-width: 1025px) {
                    grid-template-columns: repeat(3, minmax(0, 1fr));
                }

                @media (min-width: 1160px) {
                    grid-template-columns: repeat(3, minmax(0, 1fr));
                }

                @media (min-width: 1440px) {
                    gap: 32px;
                    grid-template-columns: repeat(4, minmax(0, 1fr));
                }
            }
        }
    }
}

.reco-template-category {
    .related-swiper {
        &:not(.swiper-initialized) {
            .swiper-wrapper {
                @media (min-width: 640px) {
                    grid-template-columns: repeat(3, minmax(0, 1fr));
                }

                @media (min-width: 1025px) {
                    grid-template-columns: repeat(3, minmax(0, 1fr));
                }

                @media (min-width: 1160px) {
                    grid-template-columns: repeat(3, minmax(0, 1fr));
                }

                @media (min-width: 1440px) {
                    gap: 32px;
                    grid-template-columns: repeat(4, minmax(0, 1fr));
                }
            }
        }
    }
}


.mt-product-skeleton {
    border: 1px solid #dedede;
    padding: 1rem;
    animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;

    .mt-skeleton__image {
        width: 100%;
        aspect-ratio: 1/1;
        background: lightgray;
    }

    .mt-skeleton__title-wrapper {
        margin: 10px 0 6px;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .mt-skeleton__title {
        width: 250px;
        max-width: 100%;
        height: 20px;
        background: lightgray;

        &:last-child {
            width: 200px;
            height: 16px;
        }
    }

    .mt-skeleton__price {
        width: 150px;
        max-width: 100%;
        height: 20px;
        background: lightgray;
    }

    .mt-skeleton__label {
        margin-top: 16px;
        width: 80px;
        max-width: 100%;
        height: 16px;
        background: lightgray;
    }
}

.mt-skeleton {
    animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;

    .mt-skeleton__image {
        width: 100%;
        height: 100%;
        aspect-ratio: 1/1;
        background: lightgray;
    }
}

@keyframes skeleton-pulse {
    50% {
        opacity: 0.5;
    }
}