logos-co/logos-web
1
0
Fork 0
mirror of https://github.com/logos-co/logos-web.git synced 2026-08-27 12:11:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): keep basecamp how-it-works mobile layout below 1024px

Browse Source
This commit is contained in:
JulesFILIOT
2026-06-11 18:59:59 +09:00
parent 17963d47d2
commit f85a78bbb2
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/components/sections/basecamp/_sections/how-it-works-section.tsx
+5 -5
View File
@@ -12,8 +12,8 @@ export function HowItWorksSection({ data }: { data: TableSection }) {
].filter((cta): cta is CTA => Boolean(cta))
return (
<section className="grid w-full gap-6 px-3 py-10 md:grid-cols-2 md:pt-0 md:pb-10">
<div className="flex flex-col gap-6 md:min-h-[321px] lg:min-h-[435px] xl:min-h-[549px] desktop:min-h-[621px] md:justify-between md:gap-8">
<section className="grid w-full gap-6 px-3 py-10 lg:grid-cols-2 lg:pt-0 lg:pb-10">
<div className="flex flex-col gap-6 lg:min-h-[435px] xl:min-h-[549px] desktop:min-h-[621px] lg:justify-between lg:gap-8">
<div>
<h2 className="text-h3-sans mb-[14px] text-brand-dark-green">
{data.title}
@@ -22,7 +22,7 @@ export function HowItWorksSection({ data }: { data: TableSection }) {
{data.rows.map((row) => (
<article
key={row.number}
className="grid gap-4 pt-[6px] pb-3 md:grid-cols-2 md:gap-3"
className="grid gap-4 pt-[6px] pb-3 lg:grid-cols-2 lg:gap-3"
>
<span className="text-eyebrow text-brand-dark-green">
{row.number}
@@ -50,13 +50,13 @@ export function HowItWorksSection({ data }: { data: TableSection }) {
</div>
) : null}
</div>
<div className="relative aspect-[351/313] md:aspect-auto md:h-[321px] lg:h-[435px] xl:h-[549px] desktop:h-[621px] overflow-hidden rounded-xl">
<div className="relative aspect-[351/313] lg:aspect-auto lg:h-[435px] xl:h-[549px] desktop:h-[621px] overflow-hidden rounded-xl">
<Image
src="/images/home/figma-refresh/basecamp.webp"
alt=""
fill
priority
sizes="(max-width: 768px) calc(100vw - 24px), (max-width: 1440px) calc(50vw - 24px), 696px"
sizes="(max-width: 1024px) calc(100vw - 24px), (max-width: 1440px) calc(50vw - 24px), 696px"
className="object-cover object-[16%_top]"
/>
</div>