.stories .max-w-article { max-width: 100%; } @media (min-width: 1200px) { .stories .max-w-article { max-width: 1000px; } } .stories p { margin-bottom: 1rem; } .stories-title { font-size: 1.35rem; font-weight: 600; margin-bottom: 1.5rem; color: #1e40af; } .stories-background-wrapper { padding-top: 6rem; padding-bottom: 3rem; padding-left: 0; padding-right: 0; border-bottom: 1px solid #9ca3af; } .stories-background-wrapper > .max-w-article { display: grid; gap: 1rem; grid-template-areas: "title" "brand" "background"; } @media (min-width: 768px) { .stories-background-wrapper > .max-w-article { gap: 0 3rem; grid-template-columns: auto 1fr; grid-template-areas: "title title" "brand background"; } } .stories-background-wrapper .stories-background-title { font-size: 1.5rem; font-weight: 600; margin-bottom: 1.5rem; text-align: center; grid-area: title; } @media (min-width: 768px) { .stories-background-wrapper .stories-background-title { padding-left: 6%; padding-right: 6%; } } .stories-background-wrapper .stories-background-brand { text-align: center; grid-area: brand; } .stories-background-wrapper .stories-background-brand-logo { display: inline-block; width: 10rem; height: 10rem; margin-bottom: 1rem; border-radius: 9999px; object-fit: cover; object-position: center; } .stories-background-wrapper .stories-background-brand-title { font-size: 1rem; font-weight: 600; margin-bottom: 1.5rem; text-align: center; } .stories-background-wrapper .stories-background { grid-area: background; } .stories-challenges { padding-top: 5rem; padding-bottom: 3rem; padding-left: 0; padding-right: 0; } .stories-challenges .challenge-items { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-bottom: 3rem; align-items: center; } @media (min-width: 768px) { .stories-challenges .challenge-items { grid-template-columns: auto 1fr; } } .stories-challenges .challenge-items-title { background-color: #e5e7eb; padding: 0.5rem 1rem; border-radius: 9999px; text-align: center; display: inline-flex; align-items: center; line-height: 1; margin-bottom: 0.25rem; } @media (min-width: 768px) { .stories-challenges .challenge-items-title { margin-bottom: 0; } } .stories-challenges .challenge-items-content { padding-left: 1rem; margin-bottom: 1rem; } @media (min-width: 768px) { .stories-challenges .challenge-items-content { padding-left: 0; margin-bottom: 0; } } .stories-recommend { padding-top: 1.5rem; padding-bottom: 3rem; padding-left: 0; padding-right: 0; } .stories-recommend-wrapper { display: grid; max-width: 100%; gap: 1.5rem; background-color: #e5e7eb; padding: 1.5rem; border-radius: 0.5rem; position: relative; } @media (min-width: 768px) { .stories-recommend-wrapper { display: inline-grid; grid-template-columns: clamp(200px, 20%, 300px) 1fr; } } .stories-recommend-wrapper::before { content: ''; position: absolute; left: 0; top: 2rem; height: 4rem; width: 0.25rem; background-color: #1e40af; } .stories-recommend-content p { margin-bottom: 0.5rem; } .stories-recommend-devices { display: inline-flex; max-width: 100%; overflow: auto; gap: 1rem; } .stories-recommend-device { aspect-ratio: 1; background-color: white; border-radius: 0.5rem; padding: 1rem; display: flex; flex-direction: column; width: 250px; height: 250px; } @media (min-width: 768px) { .stories-recommend-device { width: 300px; height: auto; } } .stories-recommend-device .image-wrapper { width: 100%; display: inline-flex; align-items: center; justify-content: center; flex: 1 1 auto; scroll-snap-type: x mandatory; } .stories-recommend-device .image-wrapper img { object-fit: contain; } .stories-recommend-device .image-wrapper img.pico-utm-100 { width: 7rem; } .stories-recommend-device .image-wrapper img.dual-ark-16 { width: 9rem; } .stories-recommend-device .image-wrapper img.tera-utm-12 { height: 6rem; } @media (min-width: 768px) { .stories-recommend-device .image-wrapper img.pico-utm-100 { width: 9rem; } .stories-recommend-device .image-wrapper img.dual-ark-16 { width: 11rem; } .stories-recommend-device .image-wrapper img.tera-utm-12 { height: 7rem; } } .stories-recommend-device .device-title { font-size: 0.75rem; margin: 0; } .stories-recommend-device .device-description { font-size: 1rem; margin: 0; display: flex; justify-content: space-between; align-items: center; font-weight: 600; white-space: nowrap; gap: 1rem; } .stories-achievements { margin-bottom: 0; padding-top: 3rem; padding-bottom: 6rem; padding-left: 0; padding-right: 0; border-bottom: 1px solid #9ca3af; } .stories.related-articles .story-article { display: flex; flex-direction: column; background-color: white; border-radius: 0.5rem; padding: 2.5rem 1rem; background-position: center; width: 100%; background-size: cover; background-repeat: no-repeat; position: relative; overflow: hidden; color: white; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); min-width: minmax(350px, 100%); } .stories.related-articles .story-article > * { position: relative; z-index: 10; } .stories.related-articles .story-article::before { content: ''; position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.4); z-index: 0; } .stories.related-articles .story-article-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.75rem; line-height: 1; } .stories.related-articles .story-article-content { font-size: 1rem; margin-bottom: 1rem; line-height: 1.25; min-height: 2.2rem; } .stories.related-articles .story-article-link { color: white; display: inline-flex; align-items: center; border-radius: 9999px; padding: 0.25rem 1rem; } .stories.related-articles .story-article-link .bi { rotate: 90deg; margin-top: -2px; transform: translateY(-5px); } .stories.related-articles .story-article:hover .story-article-link .bi { animation: floatingRightFade 1.75s infinite; } .stories .hover\:ripple { position: relative; z-index: 0; display: inline-block; } .stories .hover\:ripple > * { position: relative; z-index: 20; } .stories .hover\:ripple:before { content: ''; display: inline-block; width: 100%; height: 100%; border-radius: 9999px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; animation-fill-mode: forwards; background-color: var(--ripple-color, #888); } .stories .hover\:ripple:hover:before { animation: storyRippleEffect 1.25s ease-out infinite; } @keyframes storyRippleEffect { 0% { transform: scale(1); opacity: 0.35; } 100% { transform: scale(1.65); opacity: 0; } } .stories li { list-style: disc; margin-left: 1rem; } .stories p { margin-bottom: 1rem; } @keyframes floatingRightFade { 0% { transform: translateY(0px); opacity: 0; } 50% { transform: translateY(-5px); opacity: 1; } 100% { transform: translateY(-10px); opacity: 0; } } .stories-list > * { border-top: 1px solid #9ca3af; } .stories-list > *:first-child { border-top-width: 0px; } .stories-list .story-summary { display: grid; gap: 1rem; grid-template-areas: "image" "title" "content" "link"; } @media (min-width: 768px) { .stories-list .story-summary { gap: 0 4rem; grid-template-columns: 240px 1fr; grid-template-areas: "image title" "image content" "image link"; } } .stories-list .story-summary-image { grid-area: image; } .stories-list .story-summary-image > img { aspect-ratio: 6/4; width: 100%; max-width: 100%; height: auto; object-fit: cover; object-position: center; } .stories-list .story-summary-title { font-size: 1.875rem; font-weight: 500; margin-top: 0.5rem; margin-bottom: 0.75rem; line-height: 1; grid-area: title; } .stories-list .story-summary-content { font-size: 1rem; margin-bottom: 1rem; line-height: 1.25; grid-area: content; } .stories-list .story-summary-link { font-size: 1rem; color: var(--primary-color, #1e40af); display: inline-flex; align-items: center; border-radius: 9999px; padding: 0.25rem 1rem; transition: all 0.3s ease-in-out; grid-area: link; } .stories-list .story-summary-link:hover { background-color: var(--primary-color, #1e40af); color: white; }