.
Sibling subpages get their own class (subpage-virtual-offices, etc.), so
this stays off them, and off /office-space/ (329) and /enterprise/ (6363)
which reuse the same block pattern with their own content.
NOT gated on :not(.owl-loaded) on purpose. js/more.js DOES initialise
.wp-block-columns.owl-carousel; on `service` pages that bundle is deferred
by inc/lcp-performance.php until first interaction or ~10s, so the page
lives in BOTH states and these rules must hold in both.
Base rules being refined: style.css:11209-11450.
========================================================================== */
/* A. Equal-height cards. The shared rule at :11414 sets height:100% on the
column; against an auto-height parent that defeats the flex default
align-items:stretch, so cards sat at their own content height
(measured 599/541/570px) and rule B had no free space to work with.
flex-wrap:nowrap also stops long copy spilling into a second
sub-column inside the card, which is the "weird" look. */
.postid-570 .wp-block-columns.owl-carousel,
.subpage-team-offices .wp-block-columns.owl-carousel {
align-items: stretch;
}
.postid-570 .wp-block-columns.owl-carousel .wp-block-column,
.subpage-team-offices .wp-block-columns.owl-carousel .wp-block-column {
height: auto;
flex-wrap: nowrap;
align-content: stretch;
}
/* B. Pin the CTA to the bottom of every card, whatever the copy length. */
.postid-570 .wp-block-columns.owl-carousel .wp-block-column > .wp-block-buttons,
.subpage-team-offices .wp-block-columns.owl-carousel .wp-block-column > .wp-block-buttons {
margin-top: auto;
}
@media only screen and (min-width: 881px) {
/* C. Reclaim whitespace above the cards — it is free height, so spend it
before shrinking the photo. The h2's 64px margin-bottom collapses
with the intro paragraph's -32px margin-top, so 44px here leaves a
~12px visual gap. Do NOT go below ~40px: at 24px the heading and
the intro paragraph collide. */
.postid-570 .wp-block-group h2#h-flexible-scalable-and-furnished-team-solutions,
.subpage-team-offices .wp-block-group h2#h-flexible-scalable-and-furnished-team-solutions {
margin-bottom: 44px;
}
.postid-570 .wp-block-group > .wp-block-group__inner-container > h2#h-flexible-scalable-and-furnished-team-solutions + p:not([hidden]),
.subpage-team-offices .wp-block-group > .wp-block-group__inner-container > h2#h-flexible-scalable-and-furnished-team-solutions + p:not([hidden]) {
margin-bottom: 8px;
}
/* The 64px above the cards comes from the Tailwind space-y rule at
style.css:20390, whose specificity is (0,5,1) — a plain
`.postid-570 .wp-block-columns.owl-carousel` (0,3,0) loses to it.
Matching its structure and adding :not([hidden]) takes us to (0,6,0). */
.postid-570 .wp-block-group > .wp-block-group__inner-container > .wp-block-columns.owl-carousel:not([hidden]),
.subpage-team-offices .wp-block-group > .wp-block-group__inner-container > .wp-block-columns.owl-carousel:not([hidden]) {
margin-top: 8px;
}
/* D0. Match the regional pages to the national hub's gutter. The shared
rule at :11209 sets gap:41px, but on /team-offices/ something
overrides it to 0, so its columns are 415px while the regional
pages' are 387px. Same copy, narrower column, more line wraps,
+29px of card height. Zeroing the column gap here makes all 18
pages geometrically identical — and is what /team-offices/
already looks like today. */
.postid-570 .wp-block-columns.owl-carousel,
.subpage-team-offices .wp-block-columns.owl-carousel {
column-gap: 0;
}
/* D. Tighten the rhythm inside each card (shared gap is 15px, and the
image carries a further 17px margin-bottom at :11438). */
.postid-570 .wp-block-columns.owl-carousel .wp-block-column,
.subpage-team-offices .wp-block-columns.owl-carousel .wp-block-column {
gap: 6px;
}
.postid-570 .wp-block-columns .wp-block-column .wp-block-image:first-child,
.subpage-team-offices .wp-block-columns .wp-block-column .wp-block-image:first-child {
margin-bottom: 4px;
}
/* E. Landscape image instead of 1:1. max-height is viewport-relative so
short laptop windows still clear the fold; object-fit:cover
(:11278) absorbs the crop, and the hover scale + border-radius
rules are on other selectors and keep working.
THIS IS THE DIAL: raise it for a taller photo, lower it to buy
more headroom on short screens. */
.postid-570 .wp-block-columns.owl-carousel .wp-block-image:first-child,
.subpage-team-offices .wp-block-columns.owl-carousel .wp-block-image:first-child {
aspect-ratio: 16 / 9;
max-height: 17vh;
}
}
/* ==========================================================================
Team-offices cards — card chrome ("Meeting Rooms look").
Continuation of the block above; same two scopes.
COUNT CORRECTION (verified 2026-09-02): the block above says "the 17
regional pages". That is stale. Subpage URLs are generated per `region`
TAXONOMY TERM, not per city post (see
inc/pretty-permalinks-and-endpoints.php:271-298), and there are 33 region
terms, all resolving a parent state. Checked by fetching pages across all
four states and both region tiers. So A-E and F-H alike apply to 34 pages:
post 570 plus 33 regional subpages. Location-level
/{state}/{city}/{address}/team-offices/ URLs 301 to the location page and
are NOT affected.
/meeting-rooms/ (post 677) gets its card treatment from the `card-list`
class on the columns block (rules at style.css:11220, 21795, 21817, 21822).
Anthony asked for the same look here. We deliberately do NOT add that class
to post 570's markup, for two reasons:
1. it is a database change, and post 570's content is re-rendered on the
33 regional subpages, so one paste would silently restyle all 34;
2. `card-list` also carries height:100%, gap:30px and
aspect-ratio:359/240, each of which fights a tuned rule above —
A (height:auto), D0 (column-gap:0) and E (16/9 + max-height:17vh)
respectively. Copying it wholesale would undo that work.
So we take ONLY the chrome — border, radius, gradient, padding — and let
rules A-E above keep owning geometry.
========================================================================== */
/* F. The card itself. Values lifted verbatim from :21795 so the two pages
stay visually identical; the var() fallbacks are the same ones. */
.postid-570 .wp-block-columns.owl-carousel .wp-block-column,
.subpage-team-offices .wp-block-columns.owl-carousel .wp-block-column {
padding: 10px 12px 18px 12px;
border-radius: var(--radius-sm, 4px);
border: 1px solid rgba(136, 114, 68, 0.50);
background: var(--background-gradient, linear-gradient(180deg, rgba(18, 18, 15, 0.50) 41.37%, rgba(120, 120, 100, 0.25) 246.17%));
}
/* G. Breathing room above the CTA. Rule B already pins it to the bottom;
this just stops it hugging the last bullet. Matches :21822. */
.postid-570 .wp-block-columns.owl-carousel .wp-block-column > .wp-block-buttons,
.subpage-team-offices .wp-block-columns.owl-carousel .wp-block-column > .wp-block-buttons {
padding-top: 10px;
}
@media only screen and (min-width: 881px) {
/* H. Cards need a visible gutter now that they have borders — at D0's
column-gap:0 the three borders would touch. This is the one place
we spend horizontal space that D0 had reclaimed: 16px, trimmed
from an initial 24px when Anthony asked for smaller cards, so each
column loses only ~11px. Well below /meeting-rooms/'s 30px, to
protect the one-viewport fit.
If cards ever push past the fold, lower rule E's max-height (it is
the intended dial) before touching this. */
.postid-570 .wp-block-columns.owl-carousel,
.subpage-team-offices .wp-block-columns.owl-carousel {
column-gap: 16px;
}
}
/* ==========================================================================
Office-space cards — "Refined private offices, customized for your
success." Sit the Private Office / Part-Time Office / Day Office CTAs on a
common baseline. The three blurbs run four, three and two lines, so each
button sat directly under its own copy at a different height.
ONE SCOPE. .postid-329 is /office-space/ (post 329, "For Individuals"),
rendered by single-service.php inside a plain
.
templates/service-template.php has no 'office-space' case, so there are no
regional subpage clones of this content to cover — unlike team-offices,
which needs the second .subpage-* hook below at :24800. Sibling service
pages (570, 677, 693, 623, 6363) reuse the same card pattern with their
own copy and stay untouched.
NOT gated on :not(.owl-loaded), for the same reason as the team-offices
block: js/more.js does initialise .wp-block-columns.owl-carousel, but
inc/lcp-performance.php defers that bundle, so the page lives in both
states and these rules must hold in both.
Base rules being refined: style.css:11209-11450.
========================================================================== */
/* Equal-height cards first — margin-top:auto has nothing to absorb without
them. The shared rule at :11414 sets height:100% on the column, which
against an auto-height parent defeats the flex default align-items:stretch
and leaves each card at its own content height. flex-wrap:nowrap also
keeps long copy from spilling into a second sub-column inside the card. */
.postid-329 .wp-block-columns.owl-carousel {
align-items: stretch;
}
.postid-329 .wp-block-columns.owl-carousel .wp-block-column {
height: auto;
flex-wrap: nowrap;
align-content: stretch;
}
/* Then pin the CTA to the bottom of every card. The column's 15px gap from
:11426 still holds the minimum space above it — flex items do not collapse
margins, so this only ever adds space. */
.postid-329 .wp-block-columns.owl-carousel .wp-block-column > .wp-block-buttons {
margin-top: auto;
}
/* ==========================================================================
Accountants tabbed cards — "Give Clients Confidence in Your Practice".
Fit the eyebrow + heading + intro + the whole tabbed-cards card inside one
laptop viewport. Unscoped the block runs 932px tall at 1440x800, and the
fixed .custom-header eats the top 90px, so the card always spilled below
the fold.
ONE SCOPE, on purpose. .postid-10175 is the `subpage` CPT post
/texas/dallas/accountants/, rendered by single-subpage into a plain
. Subpage URLs are minted per
region term (inc/subpage-permalinks.php), but each subpage POST resolves to
exactly one URL, so this class covers this page and nothing else — the
sibling industry subpages reuse the same acf/tabbed-cards block with their
own copy and stay untouched.
Desktop only (min-width:1024px): that is the breakpoint where
custom-blocks/tabbed-cards.php swaps the mobile swipe pager for the tab
rail (style.css:15957), and below it the section is a horizontal carousel
where one-viewport fit is not the goal.
NOT gated on .owl-loaded. inc/lcp-performance.php defers js/more.js until
first interaction or ~10s, so the page lives in both states and these rules
have to hold in both.
Base rules being refined: style.css:15787-16009 and the "Compressed tabbed
section" block at :24921.
========================================================================== */
@media (min-width: 1024px) {
/* A. The h2 carries --heading-margin (64px here) below it, which is the
single largest gap in the block and pure whitespace. 24px matches
the intro paragraph's own margin-top, so the two collapse to 24
and the heading/intro pair reads as one unit. Do not go below ~20:
the intro starts to crowd the heading. */
.postid-10175 .wrap > h2#h-give-clients-confidence-in-your-practice {
margin-bottom: 24px;
}
/* B. Tighten the tab rail. 50px tall + 30px below it is generous for a
five-item nav; 40 + 18 keeps the gold underline clear of the card. */
.postid-10175 .tabbed-cards-section .tc-desktop-nav {
margin-bottom: 18px;
}
.postid-10175 .tabbed-cards-section .tc-nav-item {
padding-top: 10px;
padding-bottom: 10px;
}
/* C. THIS IS THE DIAL. The shared rule at :15945 pins the photo to a flat
360px; viewport-relative height is what actually buys the fit, and
it keeps shrinking on short windows instead of falling off the fold.
The floor stops it collapsing into a letterbox strip on ~700px-tall
screens, the ceiling stops it eating the gain back on tall ones.
object-fit:cover (:15949) absorbs the crop.
Raise this for a taller photo, lower it to buy more headroom. */
.postid-10175 .tabbed-cards-section .tc-image-wrapper {
height: clamp(190px, 26vh, 300px);
}
/* D. Close up the rest of the card: the grid gap under the photo, and the
copy block's internal rhythm (base values 35 / 40 / 30 px). */
.postid-10175 .tabbed-cards-section .tc-grid {
gap: 20px;
}
.postid-10175 .tabbed-cards-section .tc-main-title {
margin-bottom: 20px !important;
}
.postid-10175 .tabbed-cards-section .tc-description {
margin-top: 16px;
margin-bottom: 0;
}
/* E. The prev/next arrows are the last thing in the section and cost 60px
of the fold. They stay — the tab rail is not the only way through
the five cards — just smaller and closer. */
.postid-10175 #tabbedCardCarousel .owl-nav {
margin-top: 12px;
}
.postid-10175 #tabbedCardCarousel .owl-nav button {
width: 32px;
height: 32px;
}
}
/* END Accountants tabbed cards */
/* OG Amenities
The previous site's amenities layout — tinted icon chip, bold sans heading, "Read more"
disclosure, two-up grid — on the current palette. The icon chip inverts to the cream
surface on hover, the same move the FAQ list makes, so the two read as one system.
Not applied to any page yet. */
.og-amenities-header {
max-width: 780px;
margin-bottom: 64px;
}
.og-amenities-eyebrow {
color: var(--color-text-accent);
margin-bottom: 16px;
}
.og-amenities-heading {
margin: 0;
}
.og-amenities-intro {
color: var(--color-text-secondary);
margin-top: 24px;
}
.og-amenities-intro > p:last-child {
margin-bottom: 0;
}
.og-amenities-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 64px;
row-gap: 48px;
}
.og-amenities-list.cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.og-amenity-item {
display: flex;
align-items: flex-start;
gap: 20px;
}
.og-amenity-icon {
width: 56px;
height: 56px;
flex: 0 0 56px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
background: rgba(var(--color-bg-accent-rgba), 0.18);
border: 1px solid rgba(var(--color-bg-accent-rgba), 0.35);
color: var(--color-text-accent);
transition: var(--transition-ease-in-out);
}
.og-amenity-icon svg,
.og-amenity-icon img {
width: 24px;
height: 24px;
}
.og-amenity-item:hover .og-amenity-icon {
background: var(--color-bg-inverse);
border-color: var(--color-bg-inverse);
color: var(--color-text-inverse);
}
.og-amenity-item .details {
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
padding-top: 6px;
}
.og-amenity-heading {
font-family: var(--font-sans-serif);
font-size: var(--fs-body-lg);
line-height: 1.3;
font-weight: 600;
letter-spacing: 0;
color: var(--color-text-primary);
margin: 0;
}
/* Opened by the shared .accordion-toggle handler in js/more.js. */
.og-amenity-description {
display: none;
color: var(--color-text-secondary);
}
.og-amenity-description > p:last-child {
margin-bottom: 0;
}
.og-amenities .accordion-toggle {
display: inline-flex;
align-items: center;
gap: 10px;
width: auto;
margin-right: auto;
padding: 0;
text-align: left;
background: none;
color: var(--color-text-accent);
font-size: var(--fs-body-md-ui);
letter-spacing: var(--ls-body-md);
cursor: pointer;
transition: var(--transition-ease-in-out);
}
.og-amenities .accordion-toggle:hover {
color: var(--color-bg-inverse);
}
@media only screen and (max-width: 1024px) {
.og-amenities-list,
.og-amenities-list.cols-3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 40px;
row-gap: 40px;
}
}
@media only screen and (max-width: 767px) {
.og-amenities-header {
margin-bottom: 40px;
}
.og-amenities-list,
.og-amenities-list.cols-3 {
grid-template-columns: minmax(0, 1fr);
row-gap: 32px;
}
.og-amenity-icon {
width: 48px;
height: 48px;
flex: 0 0 48px;
}
.og-amenity-item .details {
padding-top: 2px;
}
}
/* END OG Amenities */
/* Blog author page (author.php). The theme stylesheet has no justify-start utility. */
.author-header .author-meta {
justify-content: center;
}
@media only screen and (min-width: 768px) {
.author-header .author-meta {
justify-content: flex-start;
}
}
/* END Blog author page */
/* ==========================================================================
Coworking in Austin — "A coworking space designed around your business."
Sit the six product-card CTAs on a common baseline.
The two .card-list rows in .img-txt-alternating already come out equal
height per row: the columns block is display:flex with the default
align-items:stretch, so every column in a row matches the tallest. What did
NOT line up is the CTA inside each card. The column is display:block, so
the buttons simply follow the blurb, and the blurbs run different line
counts (7/7/6 lines in row one, 6/5/6 in row two). Part-Time Offices and
Virtual Offices each ran a line short and their buttons floated 29px — one
line — above their neighbours'.
Making the column a flex column lets the stretched height become free space
the auto margin can absorb, which pushes the buttons to the card's bottom
edge. No heights or min-heights: the row still sizes to its own tallest
card, so this holds at any width and at any copy length.
ONE SCOPE. .coworking-austin-template is added by
templates/coworking-austin.php and this page is the only thing wearing it.
The section's markup was copied verbatim out of /coworking/ by
migrations/2026-09-24-001-page-austin-coworking.php, so /coworking/ carries
the identical .img-txt-alternating > .card-list structure and the identical
misalignment. It is deliberately left alone here — it is a live page and
was not part of the ask. To cover it too, add a `.page-id-` (or
a shared class on the group) selector to both rules below; nothing else
needs to change.
Note the cards have no chrome of their own. Every .card-list rule in this
file is qualified with .owl-carousel or #additional-services, and these rows
are neither, so the class is inert here and the "boxes" are bare columns.
========================================================================== */
.coworking-austin-template .img-txt-alternating .wp-block-columns.card-list > .wp-block-column {
display: flex;
flex-direction: column;
}
/* Flex items do not collapse margins, so the blurb's 24px margin-bottom still
sets the minimum gap above the button; this only ever adds to it. */
.coworking-austin-template .img-txt-alternating .wp-block-columns.card-list > .wp-block-column > .wp-block-buttons {
margin-top: auto;
}
/* END Coworking in Austin product cards */
/* ==========================================================================
Part-Time Offices in Austin — product hero.
templates/part-time-offices-austin.php lifts the page's .service-card-block
(image | name, price, inclusions, CTA) into the hero and swaps its h4 for the
H1. The section keeps .location-hero.landing-hero for colour, spacing and the
H1/subheading type; .pto-hero undoes the lander's centred, single-column
layout and splits it: photo left, product right, both vertically centred.
Selectors carry .pto-hero on top of the .landing-hero rules they override,
so they win on specificity rather than source order — including inside the
1434px / 1024px / 520px queries above.
ONE SCOPE. .pto-hero is only emitted by that template.
========================================================================== */
.pto-hero .hero-container {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: stretch;
gap: 64px;
max-width: 1280px;
padding: 64px 1rem;
}
.pto-hero--no-card .hero-container {
grid-template-columns: minmax(0, 1fr);
}
/* The photo matches the height of the product column beside it rather than
keeping its own ratio, so the two halves line up top and bottom. */
.pto-hero-media {
display: flex;
flex-direction: column;
}
.pto-hero-media figure {
flex: 1;
min-height: 420px;
margin: 0;
overflow: hidden;
border-radius: 4px;
}
.pto-hero-media img {
display: block;
width: 100%;
height: 100% !important;
object-fit: cover;
object-position: center;
}
.pto-hero .hero-content,
.landing-hero.pto-hero .hero-content {
flex: none;
align-self: center;
max-width: 560px;
margin: 0;
padding: 0;
text-align: left;
}
.pto-hero .content-inner {
align-items: flex-start;
gap: 20px;
}
.pto-hero .hero-subheading,
.landing-hero.pto-hero .hero-subheading {
max-width: 520px;
margin: 0;
}
/* Same chip as .single-service .service-card-block .price on /part-time-offices/. */
.pto-hero .price {
width: max-content;
padding: 10px 14px;
border-radius: 4px;
background: var(--color-accent-ash, #2F2E2C);
font-family: Indivisible;
font-size: 12px;
font-weight: 500;
line-height: 18px;
letter-spacing: 2.4px;
text-transform: uppercase;
}
.pto-hero .wp-block-list {
margin: 0;
text-align: left;
}
.pto-hero .wp-block-separator {
width: 100%;
margin: 4px 0;
}
.pto-hero .hero-actions,
.landing-hero.pto-hero .hero-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 16px;
}
.pto-hero .hero-actions .wp-block-buttons {
margin: 0;
}
.pto-hero .with-arrow {
margin: 0;
}
@media (max-width: 1024px) {
.pto-hero .hero-container {
grid-template-columns: minmax(0, 1fr);
gap: 40px;
padding: 40px 1rem;
}
.pto-hero .hero-content,
.landing-hero.pto-hero .hero-content {
max-width: 640px;
padding: 0;
}
.pto-hero-media figure {
flex: none;
min-height: 0;
aspect-ratio: 16 / 9;
}
}
/* END Part-Time Offices in Austin product hero */
/* ==========================================================================
Part-Time Offices in Austin — benefit cards.
"The office space is just the beginning" is four photo cards here rather
than the six gold-icon rows the shared .icon-list renders. The markup is
plain core/columns, put on the page by
migrations/2026-09-25-003-pto-austin-benefits-photos.php, so the section
stays editable in Pages.
The card background started as a copy of .icon-list .icon-item rather than
shared with it: that class is on five live render paths and none of them
take a photo, so a variant there would have to be opted out of everywhere
else. The border and radius that came with it are gone — see below.
ONE SCOPE. .pto-benefits only exists on this page, and the selectors carry
.pto-austin-template as well so nothing here can reach a pattern that gets
copied onto another page later.
========================================================================== */
/* 24px, not the 60px every other columns block in a landing group gets: these
four are one set, and the theme's page rhythm pulls them apart into four
unrelated things. Matching that rule's ancestor chain is what wins here —
`.entry-content > .wrap > .wp-block-group > .wp-block-group__inner-container
.wp-block-columns:not(.owl-carousel)` is six classes deep. Nothing breaks if
the nesting later changes: the rule being overridden stops applying at the
same moment this one does. */
body.pto-austin-template .entry-content > .wrap .wp-block-group__inner-container .pto-benefits.wp-block-columns {
gap: 24px;
}
/* No gold hairline and no radius, unlike .icon-list .icon-item: the photo
gives each card its own edge, and outlining that a second time only boxed
it in. The background stays — it is what separates the label strip from
the page behind it now that nothing else does. */
.pto-austin-template .pto-benefits > .wp-block-column {
display: flex;
flex-direction: column;
overflow: hidden;
background: linear-gradient(180deg, rgba(18, 18, 15, 0.50) 20.44%, rgba(120, 120, 100, 0.25) 282.55%);
}
/* The figure carries the ratio and the img fills it, because the global
`.wp-block-columns .wp-block-column .wp-block-image img` rule above already
forces height:100% !important on any image inside a column.
The photo is a banner, not the body of the card: each label is a handful of
words, and anything squarer buries them. 16:9 on the narrow cards — one per
row on a phone, two on a small tablet — and flatter still on the 610px-wide
desktop card, below. */
.pto-austin-template .pto-benefits .pto-benefit__media {
aspect-ratio: 16 / 9;
margin: 0;
overflow: hidden;
}
.pto-austin-template .pto-benefits .pto-benefit__label {
margin: 0;
padding: 20px 24px 24px;
}
/* Two by two, held all the way up. A core/columns block of four wants to be
four across, so both halves of that have to be undone: the wrap, and the
basis that divides the row by the column count. Core stacks the block
outright below 782px, which is where the second query picks it up. */
@media only screen and (min-width: 782px) {
/* !important because core's own `.wp-block-columns { flex-wrap: nowrap }`
above 782px carries it; specificity alone cannot undo that one. */
.pto-austin-template .pto-benefits {
flex-wrap: wrap !important;
}
/* `body` only to outweigh core's equally specific
`.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column`,
which sets the four-across basis and is printed after this file. */
body.pto-austin-template .pto-benefits > .wp-block-column {
flex-basis: calc(50% - 12px);
flex-grow: 0;
}
.pto-austin-template .pto-benefits .pto-benefit__media {
aspect-ratio: 4 / 1;
}
/* A 4:1 window on a 3:2 photo keeps barely a third of its height, and
centred that window starts below the faces — it took the tops of heads
off the reception and meeting-room shots. Biased upwards to land on
them; the people in all four sit in the upper half of the frame. */
.pto-austin-template .pto-benefits .pto-benefit__media img {
object-position: center 25%;
}
}
@media only screen and (min-width: 520px) and (max-width: 781px) {
.pto-austin-template .pto-benefits > .wp-block-column:not(:only-child) {
flex-basis: calc(50% - 12px) !important;
}
}
/* END Part-Time Offices in Austin benefit cards */