@import url("./root.css");
@import url("./fonts.css");
@import url("./base.css");
@import url("./glassmorphism.css");
@import url("./navbar.css");
@import url("./footer.css");
@import url("./product-page/product-knowledge.css");
@import url("./product-page/product-lineup.css");

* {
    box-sizing: border-box;
}

body.product-page {
    margin: 0;
    color: #171717;
    background: #ffffff;
}

.product-page .product-hero {
    padding-top: 100px;
}

.product-hero__container {
    width: min(1200px, calc(100% - 32px));
    margin: 0 auto;
}

.product-hero__media {
    overflow: hidden;
    border-radius: 28px;
}

.product-hero__media img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .product-page .product-hero {
        padding-top: 92px;
    }

    .product-hero__container {
        width: min(100%, calc(100% - 20px));
    }

    .product-hero__media {
        border-radius: 20px;
    }
}