/* === DOWNEAST DESIGN === */


/* === BASE & TYPOGRAPHY === */
body {
  font-family: var(--font-body-family);
  margin: 0;
  padding: 0;
  background-color: var(--body-bg);
  background-image: url("/images/background.png");
  background-repeat: repeat;
  color: var(--body-text);
}
p {
  line-height: 1.6;
  margin: 0.75em 0;
}
a {
  color: var(--section-link);
  text-decoration: none;
}
a:hover { color: var(--section-link-hover); text-decoration: underline; }

/* === HEADER === */
header {
  text-align: center;
  margin: 0;
}
header h1 {
  font-family: var(--font-h1-family);
  margin-top: 0;
  margin-bottom: 0;
  font-size: var(--font-h1-size);
  font-weight: var(--font-h1-weight);
  letter-spacing: var(--font-h1-letter-spacing);
  line-height: var(--font-h1-line-height);
  color: var(--header-title);
  text-shadow: var(--shadow-h1);
}
header .logo {
  max-width: 100%;
  height: auto;
  max-height: var(--logo-max-height);
}
header .tagline {
  font-family: var(--font-tagline-family);
  font-weight: var(--font-tagline-weight);
  text-transform: var(--font-tagline-transform);
  letter-spacing: var(--font-tagline-letter-spacing);
  font-size: var(--font-tagline-size);
  font-style: var(--font-tagline-style);
  margin-top: 0.3em;
  text-shadow: var(--shadow-tagline);
  color: var(--header-tagline);
}

/* === LAYOUT & CONTAINERS === */
.main-content {
  max-width: 1000px;
  margin: auto;
  padding: 0;
}
section {
  background: var(--section-bg);
  padding: 1.5em;
  margin-bottom: 2em;
  margin-top: 0; /* prevent pushing navs away */
  border: 3px solid var(--section-border);
  border-radius: 12px;
}
section:last-of-type {
  margin-bottom: 0;
}

/* === FOOTER === */
footer {
  background: none;
  text-align: center;
  color: var(--footer-text);
  font-size: var(--footer-font-size);
  line-height: var(--footer-line-height);
  padding: 0;
  margin: 0;
  text-shadow: var(--shadow-footer);
}

/* === BUTTONS === */
.btn {
  display: inline-block;
  padding: var(--button-padding);
  margin: 0.6em 0 1em 0;
  background-color: var(--button-bg);
  border: 1px solid var(--button-border);
  color: var(--button-text);
  font-weight: bold;
  font-size: 1rem;
  text-decoration: none !important;
  border-radius: 6px;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn:hover {
  background-color: var(--button-bg-hover);
  color: var(--button-text-hover);
  text-decoration: none !important;
}
.btn.small {
  font-size: 0.8rem;
  padding: 0.3em 0.8em;
  width: fit-content;
}
.btn.centered {
  display: block;
  margin: 0.6em auto 1em auto;
  width: fit-content;
  text-align: center;
}

/* === CONTENT CARDS & GRID === */
.content,
.content-card {
  background: var(--card-bg);
  border: 3px solid var(--nav-border);
  border-radius: 14px;
  padding: 1.5em 1.8em;
  box-shadow: var(--card-shadow);
  overflow: auto;
  color: var(--section-text);
  line-height: 1.5;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.content-card:hover {
  transform: none;
  box-shadow: var(--card-shadow-hover);
}
.content-card.highlight:hover {
  transform: translateY(-3px);
  box-shadow: var(--card-shadow-highlight);
}
.content-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2em;
  margin-top: 2em;
}
.content-card.full {
  grid-column: span 2;
}
.content-card h3 {
  color: var(--section-heading);
  font-size: var(--card-h3-size);
  margin-top: 0;
  margin-bottom: 0.4em;
}
.content-card p {
  margin: 0.4em 0 0.6em 0;
  font-size: var(--card-p-size);
}
.content-card a {
  color: var(--section-link);
  font-weight: bold;
  text-decoration: none;
}
.content-card a:hover {
  color: var(--section-link-hover);
  text-decoration: underline;
}

/* === IMAGES === */
.content-image {
  display: block;
  border-radius: 18px;
  padding: 3px;
  background: var(--image-bg);
  border: 3px solid var(--image-border);
  box-shadow: var(--image-shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
}
.content-image.gold { border-color: var(--bullet-pill-border); }
.content-image.dark { border-color: var(--nav-border); }
.content-image.accent { border-color: var(--image-border-hover); }
.content-image:hover {
  transform: scale(1.04);
  box-shadow: var(--image-shadow-hover);
}
.full-width { width: 100%; }
[class^="width"],
[class*=" width"] {
  max-width: 100%;
  box-sizing: border-box;
}
/* Widths: 5px increments from 5px through 1000px */
.width5 { width: 5px; } .width10 { width: 10px; } .width15 { width: 15px; } .width20 { width: 20px; } .width25 { width: 25px; } .width30 { width: 30px; } .width35 { width: 35px; } .width40 { width: 40px; } .width45 { width: 45px; } .width50 { width: 50px; } .width55 { width: 55px; } .width60 { width: 60px; } .width65 { width: 65px; } .width70 { width: 70px; } .width75 { width: 75px; } .width80 { width: 80px; } .width85 { width: 85px; } .width90 { width: 90px; } .width95 { width: 95px; } .width100 { width: 100px; } .width105 { width: 105px; } .width110 { width: 110px; } .width115 { width: 115px; } .width120 { width: 120px; } .width125 { width: 125px; } .width130 { width: 130px; } .width135 { width: 135px; } .width140 { width: 140px; } .width145 { width: 145px; } .width150 { width: 150px; } .width155 { width: 155px; } .width160 { width: 160px; } .width165 { width: 165px; } .width170 { width: 170px; } .width175 { width: 175px; } .width180 { width: 180px; } .width185 { width: 185px; } .width190 { width: 190px; } .width195 { width: 195px; } .width200 { width: 200px; } .width205 { width: 205px; } .width210 { width: 210px; } .width215 { width: 215px; } .width220 { width: 220px; } .width225 { width: 225px; } .width230 { width: 230px; } .width235 { width: 235px; } .width240 { width: 240px; } .width245 { width: 245px; } .width250 { width: 250px; } .width255 { width: 255px; } .width260 { width: 260px; } .width265 { width: 265px; } .width270 { width: 270px; } .width275 { width: 275px; } .width280 { width: 280px; } .width285 { width: 285px; } .width290 { width: 290px; } .width295 { width: 295px; } .width300 { width: 300px; } .width305 { width: 305px; } .width310 { width: 310px; } .width315 { width: 315px; } .width320 { width: 320px; } .width325 { width: 325px; } .width330 { width: 330px; } .width335 { width: 335px; } .width340 { width: 340px; } .width345 { width: 345px; } .width350 { width: 350px; } .width355 { width: 355px; } .width360 { width: 360px; } .width365 { width: 365px; } .width370 { width: 370px; } .width375 { width: 375px; } .width380 { width: 380px; } .width385 { width: 385px; } .width390 { width: 390px; } .width395 { width: 395px; } .width400 { width: 400px; } .width405 { width: 405px; } .width410 { width: 410px; } .width415 { width: 415px; } .width420 { width: 420px; } .width425 { width: 425px; } .width430 { width: 430px; } .width435 { width: 435px; } .width440 { width: 440px; } .width445 { width: 445px; } .width450 { width: 450px; } .width455 { width: 455px; } .width460 { width: 460px; } .width465 { width: 465px; } .width470 { width: 470px; } .width475 { width: 475px; } .width480 { width: 480px; } .width485 { width: 485px; } .width490 { width: 490px; } .width495 { width: 495px; } .width500 { width: 500px; } .width505 { width: 505px; } .width510 { width: 510px; } .width515 { width: 515px; } .width520 { width: 520px; } .width525 { width: 525px; } .width530 { width: 530px; } .width535 { width: 535px; } .width540 { width: 540px; } .width545 { width: 545px; } .width550 { width: 550px; } .width555 { width: 555px; } .width560 { width: 560px; } .width565 { width: 565px; } .width570 { width: 570px; } .width575 { width: 575px; } .width580 { width: 580px; } .width585 { width: 585px; } .width590 { width: 590px; } .width595 { width: 595px; } .width600 { width: 600px; } .width605 { width: 605px; } .width610 { width: 610px; } .width615 { width: 615px; } .width620 { width: 620px; } .width625 { width: 625px; } .width630 { width: 630px; } .width635 { width: 635px; } .width640 { width: 640px; } .width645 { width: 645px; } .width650 { width: 650px; } .width655 { width: 655px; } .width660 { width: 660px; } .width665 { width: 665px; } .width670 { width: 670px; } .width675 { width: 675px; } .width680 { width: 680px; } .width685 { width: 685px; } .width690 { width: 690px; } .width695 { width: 695px; } .width700 { width: 700px; } .width705 { width: 705px; } .width710 { width: 710px; } .width715 { width: 715px; } .width720 { width: 720px; } .width725 { width: 725px; } .width730 { width: 730px; } .width735 { width: 735px; } .width740 { width: 740px; } .width745 { width: 745px; } .width750 { width: 750px; } .width755 { width: 755px; } .width760 { width: 760px; } .width765 { width: 765px; } .width770 { width: 770px; } .width775 { width: 775px; } .width780 { width: 780px; } .width785 { width: 785px; } .width790 { width: 790px; } .width795 { width: 795px; } .width800 { width: 800px; } .width805 { width: 805px; } .width810 { width: 810px; } .width815 { width: 815px; } .width820 { width: 820px; } .width825 { width: 825px; } .width830 { width: 830px; } .width835 { width: 835px; } .width840 { width: 840px; } .width845 { width: 845px; } .width850 { width: 850px; } .width855 { width: 855px; } .width860 { width: 860px; } .width865 { width: 865px; } .width870 { width: 870px; } .width875 { width: 875px; } .width880 { width: 880px; } .width885 { width: 885px; } .width890 { width: 890px; } .width895 { width: 895px; } .width900 { width: 900px; } .width905 { width: 905px; } .width910 { width: 910px; } .width915 { width: 915px; } .width920 { width: 920px; } .width925 { width: 925px; } .width930 { width: 930px; } .width935 { width: 935px; } .width940 { width: 940px; } .width945 { width: 945px; } .width950 { width: 950px; } .width955 { width: 955px; } .width960 { width: 960px; } .width965 { width: 965px; } .width970 { width: 970px; } .width975 { width: 975px; } .width980 { width: 980px; } .width985 { width: 985px; } .width990 { width: 990px; } .width995 { width: 995px; } .width1000 { width: 1000px; }
/* Binary widths */
.width16 { width: 16px; } .width32 { width: 32px; } .width64 { width: 64px; } .width128 { width: 128px; } .width256 { width: 256px; } .width512 { width: 512px; }

/* === ALIGNMENT === */
.left {
  float: left;
  margin: 0 1.2em 0.6em 0;
}
.right {
  float: right;
  margin: 0 0 0.6em 1.2em;
}
.center {
  display: block;
  margin: 0 auto 1em auto;
  float: none;
}
/* --- Containment / Clearfix --- */
.content::after,
.content-card::after {
  content: "";
  display: block;
  clear: both;
}

/* === TEXT UTILITIES === */
.text-center {
  text-align: center;
}
.no-margin {
  margin: 0 !important;
}

/* font size percentage rules  */
.font-60 { font-size: 60% !important; }
.font-65 { font-size: 65% !important; }
.font-70 { font-size: 70% !important; }
.font-75 { font-size: 75% !important; }
.font-80 { font-size: 80% !important; }
.font-85 { font-size: 85% !important; }
.font-90 { font-size: 90% !important; }
.font-95 { font-size: 95% !important; }
.font-96 { font-size: 96% !important; }
.font-97 { font-size: 97% !important; }
.font-98 { font-size: 98% !important; }
.font-99 { font-size: 99% !important; }
.font-101 { font-size: 101% !important; }
.font-102 { font-size: 102% !important; }
.font-103 { font-size: 103% !important; }
.font-104 { font-size: 104% !important; }
.font-105 { font-size: 105% !important; }
.font-110 { font-size: 110% !important; }
.font-115 { font-size: 115% !important; }
.font-120 { font-size: 120% !important; }
.font-125 { font-size: 125% !important; }
.font-130 { font-size: 130% !important; }
.font-135 { font-size: 135% !important; }
.font-140 { font-size: 140% !important; }
.font-145 { font-size: 145% !important; }
.font-150 { font-size: 150% !important; }
.font-155 { font-size: 155% !important; }
.font-160 { font-size: 160% !important; }
.font-165 { font-size: 165% !important; }
.font-170 { font-size: 170% !important; }
.font-175 { font-size: 175% !important; }
.font-180 { font-size: 180% !important; }
.font-185 { font-size: 185% !important; }
.font-190 { font-size: 190% !important; }
.font-195 { font-size: 195% !important; }
.font-200 { font-size: 200% !important; }

/* === NAVIGATION === */
.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end; /* align bottoms evenly */
  margin: 0 2em;
  position: relative;
  z-index: 2; /* ensure tabs stay on top */
}
/* --- Navigation --- */
.navigation {
  font-size: 0.95em;
  padding: 0;
  margin: 0;
  border: 2px solid var(--nav-border);
  border-bottom: none;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
  background: var(--nav-bg);
}
.navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
.navigation li {
  padding: 0.4em 1em;
  font-size: 0.95em;
  font-weight: bold;
  color: var(--section-text);
  white-space: nowrap;
  background: var(--nav-tab-bg);
  border-left: 2px dashed var(--nav-divider);
}
.navigation li:first-child {
  border-left: none;
}
.navigation li a {
  color: var(--nav-tab-text);
  text-decoration: none;
}
.navigation li a:hover {
  text-decoration: underline;
  color: var(--nav-tab-text-active);
}
.navigation li.active {
  background: var(--nav-tab-bg-active);
}
.navigation li.active a {
  color: var(--nav-tab-text-active);
  cursor: default;
  text-decoration: none;
}
.navigation.left ul {
  justify-content: flex-start;
}
.navigation.right ul {
  justify-content: flex-end;
}

/* === BREADCRUMBS === */
section .breadcrumbs {
  display: inline-block;
  margin: 0 0 1.1em 0;
  padding: 0.3em 1.1em;
  background: rgba(255,255,255,0.07);
  border-radius: 100px;
}
section .breadcrumbs ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
section .breadcrumbs li {
  font-size: 1rem;
  font-weight: 700;
  color: var(--section-text);
  display: flex;
  align-items: center;
}
section .breadcrumbs li a {
  color: var(--section-link);
  text-decoration: none;
  transition: color 0.2s ease;
}
section .breadcrumbs li a:hover {
  color: var(--section-link-hover);
}
section .breadcrumbs li:not(:last-child)::after {
  content: "›";
  margin: 0 1em;
  font-size: 1.8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  line-height: 1;
  transform: translateY(-1px);
}
section .breadcrumbs li.active {
  font-style: italic;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
}

/* === MODULAR GRID === */
.modular-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
.modular-grid .content-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
}
.modular-grid.cols2 { grid-template-columns: repeat(2, 1fr); }
.modular-grid.cols3 { grid-template-columns: repeat(3, 1fr); }
.modular-grid.cols4 { grid-template-columns: repeat(4, 1fr); }
.modular-grid.cols5 { grid-template-columns: repeat(5, 1fr); }
.modular-grid.cols6 { grid-template-columns: repeat(6, 1fr); }
.modular-grid > * {
  width: 100%;
  box-sizing: border-box;
}
.modular-grid > .content-card {
  padding: 0.75em;
}
.screenshots img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

/* === SPOTLIGHTS === */
.spotlight {
  float: right;
  width: 340px;
  max-width: 40%;
  box-sizing: border-box;
  margin: 0 0 1em 1.5em;
  padding: 1em;
  background: var(--card-bg);
  border: 3px solid var(--nav-border);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  color: var(--section-text);
  line-height: 1.5;
}
.spotlight img {
  max-width: 100%;
  height: auto;
  border-radius: 18px;
}
.spotlight img.icon {
  float: right;
  width: auto;
  margin: 0 0 0.75em 0.75em;
}
.spotlight img.full {
  display: block;
  width: 100%;
  margin: 0 auto 1em auto;
}
.spotlight h3 {
  margin: 0 0 0.6em 0;
  color: var(--section-heading);
  font-size: var(--card-h3-size);
  line-height: 1.25;
  text-align: center;
}
.spotlight p {
  margin: 0 0 1em 0;
}
.spotlight p:last-child {
  margin-bottom: 0;
}
.spotlight .btn {
  margin-top: 0.5em;
  margin-bottom: 0;
}

/* === PILL BULLET LISTS === */
.pill-bullet {
  list-style: none;
  padding: 0;
  margin: 1em 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-start;
  align-items: center;
}
.pill-bullet li {
  margin: 0;
}
.pill-bullet li a {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  background: var(--bullet-pill-bg);
  border: 1px solid var(--bullet-pill-border);
  color: var(--bullet-pill-text);
  font-weight: bold;
  font-size: 1rem;
  line-height: 1;
  transition: background 0.2s ease, color 0.2s ease;
}
.pill-bullet li a:hover {
  background: var(--bullet-pill-bg-hover);
  color: var(--bullet-pill-text-hover);
}
.pill-bullet.small li a {
  font-size: 0.85rem;
  padding: 0.3em 0.7em;
}
.pill-bullet.big li a {
  font-size: 1.15rem;
  padding: 0.5em 1.1em;
}
ul.pill-bullet.small,
ul.pill-bullet.big {
  width: auto;
  height: auto;
}

/* === MODULAR BULLET LISTS === */
[class^="bullet-"],
[class*=" bullet-"] {
  list-style: none;
  padding-left: 0;
  margin: 0 0 1em 0;
}
[class^="bullet-"] li,
[class*=" bullet-"] li {
  font-size: 18px;
  padding-left: 1.2em;
  text-indent: -1.2em;
  margin: 0.25em 0;
  line-height: 1.4;
}
/* --- Bullet Shapes --- */
.bullet-disc li::before { content: "● "; }
.bullet-circle li::before { content: "○ "; }
.bullet-square li::before { content: "■ "; }
.bullet-box li::before { content: "□ "; }
.bullet-diamond li::before { content: "◇ "; }
.bullet-diamond-solid li::before { content: "◆ "; }
.bullet-arrow li::before { content: "➜ "; }
.bullet-chevron li::before { content: "› "; }
.bullet-caret li::before { content: "▸ "; }
.bullet-star li::before { content: "☆ "; }
.bullet-star-solid li::before { content: "★ "; }
.bullet-check li::before { content: "✓ "; }
.bullet-plus li::before { content: "+ "; }
.bullet-dash li::before { content: "– "; }
/* --- Theme Bullet Colors --- */
.bullet-theme-primary li::before {
  color: var(--bullet-theme-primary);
}
.bullet-theme-secondary li::before {
  color: var(--bullet-theme-secondary);
}
/* --- Fixed Bullet Colors --- */
.bullet-gold li::before { color: #ffd700; }
.bullet-silver li::before { color: #c0c0c0; }
.bullet-toxic li::before { color: #7fff00; }
.bullet-white li::before { color: #ffffff; }
.bullet-black li::before { color: #000000; }
.bullet-red li::before { color: #ff0000; }
.bullet-orange li::before { color: #ffa500; }
.bullet-yellow li::before { color: #ffff00; }
.bullet-green li::before { color: #008000; }
.bullet-blue li::before { color: #0000ff; }
.bullet-purple li::before { color: #800080; }

/* === IFRAME EMBEDS === */
.embed-iframe {
  width: 100%;
  max-width: 100%;
  margin: 0 0 10px 0;
  overflow: hidden;
}
.embed-iframe iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 0;
}

/* === CONTACT FORMS === */
.contact-form-wrapper {
  width: var(--form-wrapper-width);
  margin-top: 1.5em;
}
.contact-form {
  max-width: var(--form-max-width);
}
.form-group {
  margin-bottom: 1.2em;
}
.contact-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4em;
  color: var(--form-label);
}
.contact-form input,
.contact-form textarea {
  width: var(--form-input-width);
  max-width: 100%;
  box-sizing: border-box;
  background: var(--form-input-bg);
  border: 2px solid var(--form-input-border);
  border-radius: 6px;
  padding: 0.6em;
  color: var(--form-input-text);
  font-size: 1em;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--form-input-border-focus);
}
.contact-form textarea {
  height: 200px;
  resize: vertical;
}
.char-counter {
  font-size: 0.85em;
  margin-top: 0.4em;
  color: var(--form-muted-text);
}
.honeypot {
  display: none;
}
.form-feedback {
  width: 100%;
  box-sizing: border-box;
  padding: 0.8em;
  margin-bottom: 1em;
  border-radius: 6px;
  font-weight: 600;
}
.form-feedback.success {
  background: var(--form-success-bg);
  border: 2px solid var(--form-success-border);
  color: var(--form-success-text);
}
.form-feedback.error {
  background: var(--form-failure-bg);
  border: 2px solid var(--form-failure-border);
  color: var(--form-failure-text);
}

/* ============================= */
/* === Responsive Design === */
/* ============================= */

/* --- 900px --- */
@media (max-width: 900px) {
  .content-grid {
    grid-template-columns: 1fr;
  }
}

/* --- 768px --- */
@media (max-width: 768px) {
  /* Images */
  .left,
  .right {
    float: none !important;
    display: block;
    margin: 0 auto 1em auto;
  }

  /* Navigation */
  .navigation {
    margin: 0.5em auto 0 auto;
  }

  .navigation ul {
    justify-content: center;
    flex-wrap: wrap;
  }

  .nav-bar {
    flex-direction: column;
    align-items: center;
    margin: 1.5em 0 2em 0;
  }

  .nav-bar .navigation {
    width: 90%;
    max-width: 520px;
    margin: 0;
    border: 2px solid var(--nav-border);
    background: var(--nav-bg);
    overflow: hidden;
  }

  .nav-bar .navigation + .navigation {
    border-top: none;
  }

  .nav-bar .navigation:first-child {
    border-radius: 18px 18px 0 0;
  }

  .nav-bar .navigation:last-child {
    border-radius: 0 0 18px 18px;
  }

  .nav-bar .navigation ul {
    display: flex;
  }

  .nav-bar .navigation li {
    flex: 1;
    text-align: center;
    border-left: 2px dashed var(--nav-divider);
    background: var(--nav-tab-bg);
  }

  .nav-bar .navigation li:first-child {
    border-left: none;
  }

  .nav-bar .navigation a {
    display: block;
    padding: 16px 0;
    font-size: 18px;
  }

  /* Breadcrumbs */
  section .breadcrumbs {
    display: block;
    border-radius: 18px;
  }

  section .breadcrumbs ul {
    display: block;
  }

  section .breadcrumbs li {
    width: 100%;
  }

  section .breadcrumbs li:not(:last-child)::after {
    margin-left: auto;
    padding-left: 1em;
  }

  /* Spotlights */
  .spotlight {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0 0 1.5em 0;
  }

  /* Modular Grid */
  .modular-grid.cols2,
  .modular-grid.cols3,
  .modular-grid.cols4,
  .modular-grid.cols5,
  .modular-grid.cols6 {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- 480px --- */
@media (max-width: 480px) {
  .modular-grid.cols2,
  .modular-grid.cols3,
  .modular-grid.cols4,
  .modular-grid.cols5,
  .modular-grid.cols6 {
    grid-template-columns: 1fr;
  }
}