/* =========================
   ONDETEM — V1
========================= */

:root {
  --blue: #2353D9;
  --blue-dark: #172655;

  --lime: #C8EF5E;

  --black: #0A0A0B;
  --white: #FFFFFF;

  --gray-50: #F8F8F6;
  --gray-100: #E5E6E7;
  --gray-300: #C8CBCD;
  --gray-500: #9FA2A4;
  --gray-700: #5D6266;

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --radius-pill: 999px;

  --shadow-soft:
    0 18px 60px rgba(10,10,11,.07);

  --container: 1180px;

  --transition: 180ms ease;
}


/* =========================
   RESET
========================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  font-family:
    "Manrope",
    sans-serif;

  color: var(--black);

  background: var(--white);

  line-height: 1.5;

  -webkit-font-smoothing:
    antialiased;
}


img {
  max-width: 100%;
  display: block;
}


a {
  color: inherit;
  text-decoration: none;
}


button,
input {
  font: inherit;
}


button {
  cursor: pointer;
}


.container {
  width:
    min(
      calc(100% - 40px),
      var(--container)
    );

  margin-inline: auto;
}


/* =========================
   TYPOGRAPHY
========================= */

h1,
h2,
h3,
p {
  margin-top: 0;
}


h1 {
  font-size:
    clamp(
      3.3rem,
      7vw,
      6.8rem
    );

  line-height: .94;

  letter-spacing:
    -.065em;

  margin-bottom: 28px;
}


h1 span {
  color: var(--blue);
}


h2 {
  font-size:
    clamp(
      2.1rem,
      4vw,
      4rem
    );

  line-height: 1;

  letter-spacing:
    -.045em;

  margin-bottom: 0;
}


h3 {
  font-size: 1.2rem;
  line-height: 1.2;
}


.eyebrow {
  display: inline-block;

  margin-bottom: 18px;

  font-size: .78rem;

  font-weight: 800;

  letter-spacing: .12em;

  text-transform: uppercase;

  color: var(--blue);
}


.eyebrow-light {
  color: var(--lime);
}


/* =========================
   BUTTONS
========================= */

.btn {
  min-height: 54px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding:
    0 22px;

  border-radius:
    var(--radius-pill);

  border:
    1px solid transparent;

  font-weight: 800;

  transition:
    transform var(--transition),
    background var(--transition),
    color var(--transition);
}


.btn:hover {
  transform:
    translateY(-2px);
}


.btn-primary {
  background:
    var(--blue);

  color:
    var(--white);
}


.btn-lime {
  background:
    var(--lime);

  color:
    var(--black);
}


.btn-outline-light {
  border-color:
    rgba(255,255,255,.45);

  color:
    var(--white);
}


.btn-outline-light:hover {
  background:
    var(--white);

  color:
    var(--black);
}


/* =========================
   HEADER
========================= */

.site-header {
  position: sticky;

  top: 0;

  z-index: 50;

  background:
    rgba(255,255,255,.92);

  backdrop-filter:
    blur(18px);

  border-bottom:
    1px solid rgba(10,10,11,.06);
}


.header-inner {
  height: 78px;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 28px;
}


.brand {
  font-size: 1.65rem;

  font-weight: 800;

  letter-spacing:
    -.055em;

  white-space: nowrap;
}


.brand span {
  color: var(--blue);
}


.brand b {
  color: var(--lime);
}


.desktop-nav {
  display: flex;

  gap: 28px;

  font-size: .93rem;

  font-weight: 600;
}


.desktop-nav a,
.text-link {
  transition:
    color var(--transition);
}


.desktop-nav a:hover,
.text-link:hover {
  color: var(--blue);
}


.header-actions {
  display: flex;

  align-items: center;

  gap: 16px;
}


.text-link {
  font-size: .9rem;

  font-weight: 700;
}


.profile-button,
.menu-toggle {
  border: 0;

  background:
    var(--black);

  color:
    var(--white);

  border-radius: 50%;
}


.profile-button {
  width: 42px;
  height: 42px;
}


.menu-toggle {
  width: 42px;
  height: 42px;

  display: none;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  gap: 5px;
}


.menu-toggle span {
  width: 17px;

  height: 2px;

  background:
    currentColor;

  border-radius: 5px;
}


.mobile-menu {
  display: none;

  padding:
    16px 20px 24px;

  background:
    var(--white);

  border-top:
    1px solid var(--gray-100);
}


.mobile-menu.open {
  display: grid;
  gap: 16px;
}


.mobile-menu a {
  font-weight: 700;
}


/* =========================
   HERO
========================= */

.hero {
  padding:
    82px 0 96px;

  overflow: hidden;
}


.hero-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(360px, .8fr);

  gap: 80px;

  align-items: center;
}


.hero-copy > p {
  max-width: 640px;

  color:
    var(--gray-700);

  font-size: 1.05rem;

  margin-bottom: 34px;
}


/* =========================
   SEARCH
========================= */

.search-box {
  display: grid;

  grid-template-columns:
    1.2fr
    1fr
    auto;

  gap: 10px;

  padding: 10px;

  background:
    var(--white);

  border:
    1px solid var(--gray-100);

  border-radius:
    var(--radius-lg);

  box-shadow:
    var(--shadow-soft);

  max-width: 820px;
}


.search-field {
  padding:
    8px 14px;

  border-right:
    1px solid var(--gray-100);
}


.search-field label {
  display: block;

  font-size: .72rem;

  font-weight: 800;

  margin-bottom: 4px;
}


.search-field input {
  width: 100%;

  border: 0;

  outline: 0;

  background:
    transparent;

  color:
    var(--black);

  font-size: .95rem;
}


.search-field input::placeholder {
  color:
    var(--gray-500);
}


.popular-searches {
  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 8px;

  margin-top: 18px;

  font-size: .82rem;
}


.popular-searches span {
  color:
    var(--gray-500);
}


.popular-searches button {
  border: 0;

  background:
    transparent;

  padding: 0;

  font-weight: 700;

  color:
    var(--blue);
}


/* =========================
   HERO VISUAL
========================= */

.hero-visual {
  min-height: 540px;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;
}


.hero-visual::before {
  content: "";

  position: absolute;

  width: 440px;

  height: 440px;

  right: -30px;

  top: 10px;

  border-radius: 50%;

  background:
    rgba(35,83,217,.13);

  filter:
    blur(90px);

  pointer-events: none;
}


.hero-visual::after {
  content: "";

  position: absolute;

  width: 260px;

  height: 260px;

  left: 0;

  bottom: 10px;

  border-radius: 50%;

  background:
    rgba(200,239,94,.15);

  filter:
    blur(75px);

  pointer-events: none;
}


.visual-card {
  position: absolute;

  overflow: hidden;

  background:
    var(--white);

  border-radius:
    var(--radius-xl);

  box-shadow:
    0 28px 70px rgba(10,10,11,.14);

  border:
    1px solid rgba(10,10,11,.05);
}


.visual-card-main {
  width:
    min(
      100%,
      390px
    );

  transform:
    rotate(2deg);

  z-index: 2;
}


.visual-card-small {
  width: 210px;

  left: -10px;

  bottom: 54px;

  transform:
    rotate(-6deg);

  z-index: 3;
}


.mock-photo {
  height: 360px;

  position: relative;

  overflow: hidden;
}


.visual-card-small
.mock-photo {
  height: 170px;
}


.mock-photo-img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  transition:
    transform .6s ease;
}


.visual-card:hover
.mock-photo-img {
  transform:
    scale(1.04);
}


.photo-overlay {
  position: absolute;

  inset: 0;
}


.photo-overlay-blue {
  background:
    linear-gradient(
      135deg,
      rgba(23,38,85,.35),
      rgba(35,83,217,.10)
    );

  mix-blend-mode:
    multiply;
}


.photo-overlay-dark {
  background:
    linear-gradient(
      130deg,
      rgba(10,10,11,.55),
      rgba(10,10,11,.10)
    );
}


.photo-label {
  position: absolute;

  top: 18px;

  left: 18px;

  padding:
    8px 11px;

  border-radius:
    var(--radius-pill);

  background:
    var(--lime);

  color:
    var(--black);

  font-weight: 800;

  font-size: .72rem;

  z-index: 2;
}


.mock-card-info {
  padding: 22px;

  display: grid;

  gap: 6px;

  position: relative;

  z-index: 2;
}


.mock-card-info span,
.visual-card-small span {
  font-size: .78rem;

  color:
    var(--gray-500);
}


.mock-card-info strong {
  font-size: 1.15rem;
}


.visual-card-small span {
  display: block;

  padding:
    16px 18px 18px;

  color:
    var(--black);

  font-weight: 700;
}


.floating-pill {
  position: absolute;

  right: 0;

  bottom: 60px;

  background:
    var(--black);

  color:
    var(--white);

  border-radius:
    var(--radius-pill);

  padding:
    14px 18px;

  font-size: .85rem;

  font-weight: 800;

  box-shadow:
    0 18px 35px rgba(10,10,11,.20);

  z-index: 4;
}


/* =========================
   SECTIONS
========================= */

.section {
  padding:
    96px 0;
}


.section-soft {
  background:
    var(--gray-50);
}


.compact-section {
  padding-bottom: 42px;
}


.section-heading {
  display: flex;

  align-items: end;

  justify-content:
    space-between;

  gap: 24px;

  margin-bottom: 42px;
}


.section-link {
  font-size: .88rem;

  font-weight: 800;

  color:
    var(--blue);
}


/* =========================
   ADS
========================= */

.ad-section {
  padding:
    34px 0 50px;
}


.ad-section-soft {
  background:
    var(--gray-50);
}


.ad-wrapper {
  width: 100%;
}


.ad-label {
  display: block;

  margin-bottom: 8px;

  font-size: .62rem;

  text-transform: uppercase;

  letter-spacing: .12em;

  color:
    var(--gray-500);

  font-weight: 700;
}


.ad-placeholder {
  width: 100%;

  min-height: 118px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 4px;

  border:
    1px dashed var(--gray-300);

  border-radius:
    var(--radius-md);

  background:
    linear-gradient(
      135deg,
      var(--gray-50),
      var(--white)
    );

  color:
    var(--gray-500);

  text-align: center;
}


.ad-placeholder-title {
  color:
    var(--gray-700);

  font-size: .82rem;

  font-weight: 700;
}


.ad-placeholder small {
  font-size: .7rem;
}


.adsbygoogle {
  width: 100%;
  min-height: 90px;
}


/* =========================
   CATEGORY CARDS
========================= */

.category-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 16px;
}


.category-card {
  min-height: 180px;

  padding: 22px;

  border:
    1px solid var(--gray-100);

  border-radius:
    var(--radius-md);

  display: flex;

  flex-direction: column;

  justify-content:
    flex-end;

  gap: 6px;

  background:
    var(--white);

  transition:
    transform var(--transition),
    border-color var(--transition),
    background var(--transition),
    box-shadow var(--transition);
}


.category-card:hover {
  transform:
    translateY(-4px);

  border-color:
    var(--lime);

  background:
    #fbfff0;

  box-shadow:
    0 16px 40px
    rgba(10,10,11,.06);
}


.category-icon {
  width: 44px;

  height: 44px;

  margin-bottom: auto;

  display: grid;

  place-items: center;

  border-radius: 14px;

  background:
    var(--gray-50);

  font-size: 1.15rem;
}


.category-card strong {
  font-size: 1rem;
}


.category-card small {
  color:
    var(--gray-500);
}


/* =========================
   BUSINESS CARDS
========================= */

.business-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 20px;
}


.business-card {
  background:
    var(--white);

  border-radius:
    var(--radius-lg);

  overflow: hidden;

  box-shadow:
    0 12px 30px rgba(10,10,11,.04);

  border:
    1px solid rgba(10,10,11,.05);

  transition:
    transform var(--transition),
    box-shadow var(--transition);
}


.business-card:hover {
  transform:
    translateY(-4px);

  box-shadow:
    0 20px 48px rgba(10,10,11,.09);
}


.business-image {
  height: 260px;

  position: relative;

  overflow: hidden;
}


.business-photo {
  width: 100%;

  height: 100%;

  object-fit: cover;

  transition:
    transform .5s ease;
}


.business-card:hover
.business-photo {
  transform:
    scale(1.035);
}


.business-overlay {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(10,10,11,.22),
      transparent 55%
    );
}


.tag {
  position: absolute;

  left: 16px;

  top: 16px;

  background:
    var(--white);

  color:
    var(--black);

  border-radius:
    var(--radius-pill);

  padding:
    8px 10px;

  font-size: .68rem;

  font-weight: 800;

  z-index: 2;
}


.tag-lime {
  background:
    var(--lime);
}


.tag-blue {
  background:
    var(--blue);

  color:
    var(--white);
}


.favorite-button {
  position: absolute;

  top: 14px;

  right: 14px;

  width: 38px;

  height: 38px;

  border-radius: 50%;

  border: 0;

  background:
    rgba(255,255,255,.94);

  font-size: 1.2rem;

  z-index: 2;
}


.business-content {
  padding:
    20px 20px 22px;
}


.business-content h3 {
  margin:
    8px 0 6px;

  font-size: 1.35rem;
}


.business-content p {
  margin-bottom: 18px;

  color:
    var(--gray-500);

  font-size: .9rem;
}


.business-content a {
  color:
    var(--blue);

  font-weight: 800;

  font-size: .86rem;
}


.rating {
  font-size: .82rem;

  font-weight: 800;
}


.rating span {
  color:
    var(--gray-500);

  font-weight: 600;
}


/* =========================
   INTERESTS
========================= */

.interest-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 16px;
}


.interest-card {
  min-height: 380px;

  padding: 22px;

  border-radius:
    var(--radius-lg);

  position: relative;

  overflow: hidden;

  color:
    var(--white);

  display: flex;

  flex-direction: column;

  justify-content:
    flex-end;

  transition:
    transform var(--transition),
    box-shadow var(--transition);
}


.interest-card:hover {
  transform:
    translateY(-4px);

  box-shadow:
    0 20px 48px
    rgba(10,10,11,.12);
}


.interest-card::before {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(10,10,11,.82),
      rgba(10,10,11,.05) 60%
    );
}


.interest-card span,
.interest-card small {
  position: relative;

  z-index: 1;
}


.interest-card span {
  font-size: 1.45rem;

  font-weight: 800;

  letter-spacing:
    -.03em;
}


.interest-card small {
  margin-top: 4px;

  opacity: .8;
}


.interest-food {
  background:
    linear-gradient(
      145deg,
      #916742,
      #d8c6aa
    );
}


.interest-night {
  background:
    linear-gradient(
      145deg,
      #1d234a,
      #4364c7
    );
}


.interest-care {
  background:
    linear-gradient(
      145deg,
      #89966c,
      #d8e1b9
    );
}


.interest-home {
  background:
    linear-gradient(
      145deg,
      #82776d,
      #ddd8d2
    );
}


/* =========================
   BANNER EMPRESAS
========================= */

.advertise-banner {
  background:
    var(--blue);

  color:
    var(--white);

  padding:
    88px 0;
}


.advertise-grid {
  display: grid;

  grid-template-columns:
    1.15fr .85fr;

  gap: 80px;

  align-items: end;
}


.advertise-grid h2 {
  max-width: 760px;

  font-size:
    clamp(
      3rem,
      7vw,
      6.8rem
    );

  letter-spacing:
    -.065em;
}


.advertise-content p {
  max-width: 480px;

  margin-bottom: 28px;

  color:
    rgba(255,255,255,.8);
}


/* =========================
   NEARBY
========================= */

.nearby-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 14px;
}


.nearby-card {
  padding: 24px;

  border-radius:
    var(--radius-md);

  border:
    1px solid var(--gray-100);

  transition:
    transform var(--transition),
    border-color var(--transition);
}


.nearby-card:hover {
  transform:
    translateY(-3px);

  border-color:
    var(--lime);
}


.nearby-card strong {
  display: block;

  margin:
    14px 0 6px;
}


.nearby-card p {
  margin: 0;

  color:
    var(--gray-500);

  font-size: .88rem;
}


.distance {
  display: inline-flex;

  padding:
    7px 10px;

  background:
    var(--gray-50);

  border-radius:
    var(--radius-pill);

  font-size: .72rem;

  font-weight: 800;
}


/* =========================
   ARTICLES
========================= */

.article-grid {
  display: grid;

  grid-template-columns:
    1.25fr
    .875fr
    .875fr;

  gap: 20px;
}


.article-card {
  background:
    var(--white);

  border-radius:
    var(--radius-lg);

  overflow: hidden;

  transition:
    transform var(--transition),
    box-shadow var(--transition);
}


.article-card:hover {
  transform:
    translateY(-4px);

  box-shadow:
    0 20px 48px
    rgba(10,10,11,.08);
}


.article-image {
  height: 230px;

  overflow: hidden;

  position: relative;
}


.article-featured
.article-image {
  height: 310px;
}


.article-photo {
  width: 100%;

  height: 100%;

  object-fit: cover;

  transition:
    transform .5s ease;
}


.article-card:hover
.article-photo {
  transform:
    scale(1.035);
}


.article-copy {
  padding: 20px;
}


.article-copy > span {
  font-size: .68rem;

  font-weight: 800;

  letter-spacing: .1em;

  color:
    var(--blue);
}


.article-copy h3 {
  margin:
    10px 0 18px;
}


.article-copy a {
  font-size: .84rem;

  font-weight: 800;

  color:
    var(--blue);
}


/* =========================
   TAG LIST
========================= */

.tag-list {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: 28px;
}


.tag-list button {
  padding:
    12px 18px;

  border-radius:
    var(--radius-pill);

  border:
    1px solid var(--gray-100);

  background:
    var(--white);

  font-weight: 700;

  transition:
    background var(--transition),
    border-color var(--transition),
    transform var(--transition);
}


.tag-list button:hover {
  background:
    var(--lime);

  border-color:
    var(--lime);

  transform:
    translateY(-2px);
}


/* =========================
   TESTIMONIALS
========================= */

.testimonial-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 18px;
}


.testimonial-card {
  padding: 28px;

  border-radius:
    var(--radius-lg);

  border:
    1px solid var(--gray-100);
}


.stars {
  letter-spacing: .08em;

  color:
    var(--blue);

  margin-bottom: 18px;
}


.testimonial-card p {
  min-height: 74px;

  font-size: 1.08rem;
}


.testimonial-card strong,
.testimonial-card small {
  display: block;
}


.testimonial-card small {
  color:
    var(--gray-500);

  margin-top: 4px;
}


/* =========================
   FINAL CTA
========================= */

.final-cta {
  background:
    var(--black);

  color:
    var(--white);

  padding:
    90px 0;
}


.final-cta-grid {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 60px;

  align-items: end;
}


.final-cta p {
  color:
    rgba(255,255,255,.7);

  max-width: 480px;
}


.cta-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;
}


/* =========================
   FOOTER
========================= */

.site-footer {
  padding:
    72px 0 26px;
}


.footer-grid {
  display: grid;

  grid-template-columns:
    1.6fr
    repeat(3, 1fr);

  gap: 40px;
}


.footer-brand p {
  max-width: 320px;

  margin-top: 16px;

  color:
    var(--gray-500);

  font-size: .9rem;
}


.footer-column {
  display: grid;

  align-content: start;

  gap: 12px;
}


.footer-column strong {
  margin-bottom: 4px;
}


.footer-column a {
  color:
    var(--gray-700);

  font-size: .9rem;
}


.footer-bottom {
  margin-top: 62px;

  padding-top: 22px;

  border-top:
    1px solid var(--gray-100);

  display: flex;

  justify-content:
    space-between;

  gap: 20px;

  font-size: .78rem;

  color:
    var(--gray-500);
}


.footer-bottom div {
  display: flex;

  gap: 18px;
}


/* =========================
   TOAST
========================= */

.toast {
  position: fixed;

  left: 50%;

  bottom: 28px;

  transform:
    translate(-50%, 120px);

  opacity: 0;

  z-index: 100;

  background:
    var(--black);

  color:
    var(--white);

  padding:
    14px 18px;

  border-radius:
    var(--radius-pill);

  font-size: .84rem;

  font-weight: 700;

  transition:
    transform 260ms ease,
    opacity 260ms ease;
}


.toast.show {
  opacity: 1;

  transform:
    translate(-50%, 0);
}


/* =========================
   RESPONSIVE
========================= */

@media
(max-width: 1024px) {

  .hero-grid,
  .advertise-grid,
  .final-cta-grid {
    grid-template-columns:
      1fr;
  }


  .hero-visual {
    min-height: 460px;
  }


  .category-grid,
  .nearby-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }


  .interest-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }


  .business-grid,
  .testimonial-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }


  .business-card:last-child,
  .testimonial-card:last-child {
    grid-column:
      1 / -1;
  }


  .article-grid {
    grid-template-columns:
      1fr 1fr;
  }


  .article-featured {
    grid-column:
      1 / -1;
  }


  .footer-grid {
    grid-template-columns:
      1.5fr 1fr 1fr;
  }


  .footer-column:last-child {
    grid-column:
      2 / 4;
  }

}


@media
(max-width: 820px) {

  .desktop-nav,
  .text-link,
  .profile-button {
    display: none;
  }


  .menu-toggle {
    display: flex;
  }


  .hero {
    padding-top: 56px;
  }


  .hero-grid {
    gap: 42px;
  }


  .search-box {
    grid-template-columns:
      1fr;
  }


  .search-field {
    border-right: 0;

    border-bottom:
      1px solid var(--gray-100);
  }


  .hero-visual {
    min-height: 420px;
  }


  .section {
    padding:
      72px 0;
  }


  .section-heading {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .business-grid,
  .testimonial-grid,
  .article-grid {
    grid-template-columns:
      1fr;
  }


  .business-card:last-child,
  .testimonial-card:last-child,
  .article-featured {
    grid-column:
      auto;
  }


  .footer-grid {
    grid-template-columns:
      1fr 1fr;
  }


  .footer-brand {
    grid-column:
      1 / -1;
  }


  .footer-column:last-child {
    grid-column:
      auto;
  }


  .ad-placeholder {
    min-height: 100px;
  }

}


@media
(max-width: 560px) {

  .container {
    width:
      min(
        calc(100% - 28px),
        var(--container)
      );
  }


  .header-inner {
    height: 70px;
  }


  h1 {
    font-size:
      clamp(
        3rem,
        16vw,
        4.3rem
      );
  }


  h2 {
    font-size:
      clamp(
        2rem,
        10vw,
        3.2rem
      );
  }


  .category-grid,
  .nearby-grid,
  .interest-grid {
    grid-template-columns:
      1fr;
  }


  .category-card {
    min-height: 150px;
  }


  .interest-card {
    min-height: 300px;
  }


  .hero-visual {
    min-height: 360px;
  }


  .visual-card-main {
    width: 82%;
  }


  .visual-card-small {
    width: 160px;

    left: 0;
  }


  .floating-pill {
    bottom: 20px;
  }


  .mock-photo {
    height: 260px;
  }


  .visual-card-small
  .mock-photo {
    height: 135px;
  }


  .advertise-grid h2 {
    font-size:
      clamp(
        3rem,
        15vw,
        4.8rem
      );
  }


  .footer-grid {
    grid-template-columns:
      1fr;
  }


  .footer-brand,
  .footer-column:last-child {
    grid-column:
      auto;
  }


  .footer-bottom {
    flex-direction:
      column;
  }


  .ad-section {
    padding:
      24px 0 36px;
  }


  .ad-placeholder {
    min-height: 96px;

    border-radius:
      var(--radius-sm);
  }

}