| Latest revision |
Your text |
| Line 1: |
Line 1: |
| .mp-button {
| |
| background: rgba(255, 255, 255, 0.15);
| |
| border: 1px solid rgba(255, 255, 255, 0.2);
| |
| border-radius: 50px;
| |
| color: white;
| |
| display: inline-block;
| |
| font-size: clamp(0.9rem, 4vw, 1rem);
| |
| font-weight: 600;
| |
| margin: 0.25rem;
| |
| padding: min(0.9rem, 3vw) min(2rem, 5vw);
| |
| text-align: center;
| |
| transition: all 0.3s ease;
| |
| }
| |
| .mp-button:hover {
| |
| background: rgba(255, 255, 255, 0.25);
| |
| }
| |
| .mp-card { | | .mp-card { |
| border-radius: min(16px, 4vw); | | border-radius: min(16px, 4vw); |
| Line 20: |
Line 4: |
| margin-bottom: min(2rem, 6vw); | | margin-bottom: min(2rem, 6vw); |
| padding: min(2rem, 8vw) min(2rem, 6vw); | | padding: min(2rem, 8vw) min(2rem, 6vw); |
| }
| |
| .mp-card-heading {
| |
| align-items: center;
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| gap: min(0.5rem, 2vw);
| |
| justify-content: center;
| |
| margin-bottom: min(1.5rem, 4vw);
| |
| }
| |
| .mp-card-heading .mw-heading3 {
| |
| font-size: clamp(1.2rem, 5vw, 1.5rem);
| |
| font-weight: 700;
| |
| margin: 0;
| |
| padding: 0;
| |
| }
| |
| /* This cannot be merged into the above rule due to the color breaking */
| |
| .mp-card-heading h3 {
| |
| color: #2d3748;
| |
| }
| |
| .mp-card-list {
| |
| color: #4a5568;
| |
| font-size: clamp(0.9rem, 3.5vw, 1rem);
| |
| line-height: 1.6;
| |
| }
| |
| .mp-card-list-item {
| |
| margin-bottom: min(1rem, 3vw);
| |
| }
| |
| .mp-icon {
| |
| align-items: center;
| |
| background: radial-gradient(circle, #4089cb 0, #0081b4 100%);
| |
| border-radius: 50%;
| |
| display: inline-flex;
| |
| justify-content: center;
| |
| height: min(40px, 10vw);
| |
| width: min(40px, 10vw);
| |
| }
| |
| .mp-icon-inner {
| |
| filter: brightness(0) invert(1);
| |
| line-height: 1;
| |
| } | | } |
