diff --git a/main.css b/main.css
index 8ec76d8..7539333 100644
--- a/main.css
+++ b/main.css
@@ -45,143 +45,51 @@ body {
}
.price-grid {
- display: grid;
- grid-template-columns: 1fr 1fr 1fr;
- gap: 50px;
- width: 1200px;
}
.price-grid > .item {
- display: flex;
- flex-direction: column;
- align-items: center;
- background-color: white;
- height: fit-content;
- border-radius: var(--border-radius);
- border: 1px solid var(--primary);
}
.price-grid > .item > .details {
- text-align: center;
- padding: 15px 15px 30px 15px;
}
.price-grid > .item > .details > .title {
- font-size: 1.5rem;
- color: var(--primary);
- font-size: 700;
}
.price-grid > .item > .banner img {
- width: 100%;
- height: 200px;
- object-fit: cover;
- object-position: center;
- border-top-right-radius: var(--border-radius);
- border-top-left-radius: var(--border-radius);
}
.price-grid > .item > .details > .feature-container {
- display: grid;
- grid-template-columns: 1fr;
- gap: 10px;
}
.feature,
.info-icon {
- display: flex;
- justify-content: center;
- align-items: center;
}
.info-icon > img {
- width: 18px;
- height: auto;
- margin-left: 5px;
}
.price {
- font-size: 1.5rem;
- margin-top: 20px;
-}
-
-@media (max-width: 48em) {
- .content {
- grid-template-columns: 1fr;
- width: 100%;
- box-shadow: unset;
- }
-
- .price-grid {
- grid-template-columns: 1fr;
- width: 100%;
- }
-
- .price-grid > .item {
- box-shadow: var(--shadow);
- }
}
.tooltip:before {
- content: attr(data-text);
- position: absolute;
- top: 50%;
- transform: translateY(-50%);
- left: 100%;
- margin-left: 15px;
- width: 200px;
- padding: 10px;
- border-radius: 10px;
- background: #000;
- color: #fff;
- text-align: center;
- display: none;
- opacity: 0;
- transition: 0.3s opacity;
}
.tooltip-left:before {
- left: unset;
- right: 100%;
- margin-right: 15px;
- margin-left: unset;
}
.tooltip:hover:before,
.tooltip:hover:after {
- display: block;
- opacity: 1;
}
.tooltip {
- position: relative;
- cursor: help;
}
.tooltip:after {
- content: "";
- position: absolute;
- left: 100%;
- margin-left: -5px;
- top: 50%;
- transform: translateY(-50%);
- border: 10px solid #000;
- border-color: transparent black transparent transparent;
- display: none;
}
.tooltip-left:after {
- left: unset;
- right: 100%;
- margin-left: unset;
- margin-right: -5px;
- border-color: transparent transparent transparent black;
-}
-
-.pseudo-demo::before {
- content: attr(data-tooltip);
}
-.pseudo-demo::after {
- content: "----";
+@media (max-width: 48em) {
}