CTA Section Hotel

CTA Section Hotel uses CSS Grid to position 5 media elements in a 2-3 vertically centered layout next to a bold headline, simple lede, and button. The layout of the media elements, which slightly overflow the top and bottom of the section (but are cutoff by overflow hidden), do a great job of grabbing the visitor’s eye and encouraging them focus on the CTA text.

Note: Since the media layout uses grid-area, it’s sensitive to the number of items shown. The suggested number of media items is five. We used grid-area to ensure that the media layout is query loop compatible via a single query loop.