Editorial section is image full width

mail@pastecode.io avatar
unknown
typescript
7 months ago
1.3 kB
1
Indexable
Never
<section style={aspectRatioStyle} className="bg-col-51">
        <div className="relative block aspect-[--image-ratio] lg:hidden">
          <Image
            priority
            src={image.src}
            alt={image.alt}
            fill
            placeholder="blur"
            blurDataURL={image.lqip}
            className={'pointer-events-none object-cover'}
            sizes="100vw"
          />
        </div>
        <Container>
          <div className="grid items-center gap-10 lg:grid-cols-12">
            <div className="py-10 lg:col-span-6">
              <TextComponent
                {...textComponent}
                desktopAlignment="start"
                mobileAlignment="start"
              />
            </div>
            <div className="col-span-6 mr-[-14.65%] hidden lg:block">
              <div className="relative aspect-[--image-ratio]">
                <Image
                  priority
                  src={image.src}
                  alt={image.alt}
                  fill
                  placeholder="blur"
                  blurDataURL={image.lqip}
                  className={'pointer-events-none object-cover'}
                  sizes="100vw"
                />
              </div>
            </div>
          </div>
        </Container>
      </section>