/* ======================================================================== ================================= Cards1 =============================== ======================================================================== */ /* NOTE: Cards1 uses Material Symbols / Icons from Google Fonts. Insert the following in -Tag to use the icons: Icons can be found in: https://fonts.google.com/ -> Icons. */ .cards1-box { border: 1px solid var(--md-sys-color-custom-color-1-container); border-radius: 8px; margin: 20px 0px 20px 0px; } .cards1-box header { border-top-left-radius: 8px; border-top-right-radius: 8px; background-color: var(--md-sys-color-custom-color-1-container); color: var(--md-sys-color-on-secondary-container); padding: 24px 6px 12px 6px; text-align: center; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; } .cards1-box-content-body { padding: 0px 24px 0px 24px; /* Align text to start. Because the text in boxes can be long. This makes it difficult to read when centered. Use of start instead of left for better accessibility for different kinds of languages that are not read e. g. from left-to-right */ text-align: start; } .cards1-box .material-symbols-container { background-color: var(--md-sys-color-on-secondary-container); color: var(--md-sys-color-custom-color-1-container); border-radius: 50%; height: 72px; width: 72px; display: flex; justify-content: center; align-items: center; } .cards1-box .material-symbols-container .material-symbols-outlined { font-variation-settings: 'FILL' var(--md-sys-color-custom-color-1-container), 'wght' 400, 'GRAD' 0, 'opsz' 24; font-size: 3rem; } /* ======================================================================== ====================== Mobile Responsiveness =========================== ======================================================================== */ /* Media Query Breakpoints are based on the sizes of the devices in Google developer tools. */ @media (min-width: 1921px) { .cards1-box .material-symbols-container { height: 108px; width: 108px; } } @media (max-width: 768px) { .cards1-box .material-symbols-container { height: 60px; width: 60px; } }