infinity-forge/dist/ui/components/site/mvv/versions/version-01/styles.js

codie Library

"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.MVV = void 0;
var styled_components_1 = __importDefault(require("styled-components"));
exports.MVV = (0, styled_components_1.default)('section')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  z-index: 1;\n  padding: 0;\n  position: relative;\n\n  .container {\n    gap: 1.5vw;\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .mvv-card {\n    gap: 1.5vw;\n    width: 100%;\n    max-width: 480px;\n    padding: 4%;\n    display: flex;\n    aspect-ratio: 1.5;\n    text-align: center;\n    align-items: center;\n    flex-direction: column;\n    justify-content: flex-start;\n    background-color: #efefef;\n    filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.16));\n  }\n\n  .icon {\n    width: clamp(40px, 3.13vw, 60px);\n    height: clamp(40px, 3.13vw, 60px);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    img {\n      object-fit: contain;\n    }\n  }\n\n  @media only screen and (max-width: 1200px) {\n    .mvv-card {\n      padding: 3%;\n    }\n\n    .box-icon {\n      width: 50px;\n      height: 50px;\n    }\n  }\n\n  @media only screen and (max-width: 768px) {\n    .container {\n      gap: 15px;\n      align-items: center;\n      flex-direction: column;\n    }\n\n    .mvv-card {\n      gap: 15px;\n      width: 55%;\n      padding: 4%;\n      min-width: 290px;\n      aspect-ratio: unset;\n    }\n  }\n\n  @media only screen and (max-width: 500px) {\n    .box-icon {\n      width: 45px;\n      height: 45px;\n    }\n  }\n"], ["\n  z-index: 1;\n  padding: 0;\n  position: relative;\n\n  .container {\n    gap: 1.5vw;\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .mvv-card {\n    gap: 1.5vw;\n    width: 100%;\n    max-width: 480px;\n    padding: 4%;\n    display: flex;\n    aspect-ratio: 1.5;\n    text-align: center;\n    align-items: center;\n    flex-direction: column;\n    justify-content: flex-start;\n    background-color: #efefef;\n    filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.16));\n  }\n\n  .icon {\n    width: clamp(40px, 3.13vw, 60px);\n    height: clamp(40px, 3.13vw, 60px);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    img {\n      object-fit: contain;\n    }\n  }\n\n  @media only screen and (max-width: 1200px) {\n    .mvv-card {\n      padding: 3%;\n    }\n\n    .box-icon {\n      width: 50px;\n      height: 50px;\n    }\n  }\n\n  @media only screen and (max-width: 768px) {\n    .container {\n      gap: 15px;\n      align-items: center;\n      flex-direction: column;\n    }\n\n    .mvv-card {\n      gap: 15px;\n      width: 55%;\n      padding: 4%;\n      min-width: 290px;\n      aspect-ratio: unset;\n    }\n  }\n\n  @media only screen and (max-width: 500px) {\n    .box-icon {\n      width: 45px;\n      height: 45px;\n    }\n  }\n"])));
var templateObject_1;
//# sourceMappingURL=styles.js.map