/* ==============================================================================================
	global.css		This is my global css
=============================================================================================== */

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

html,
body {
     height: 100%;
     margin: 0;
     padding: 0;
     font-family: var(--font-3-body);
     color: var(--shade-2);
     font-size: 1rem;
     line-height: 1.6;
     background-color: var(--bg-1);
}

body {
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
}

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

a {
     color: var(--color-2);
     text-decoration: none;
     transition: color 0.2s ease;
}

a:hover {
     color: var(--color-3);
     text-decoration: underline;
}

h1,
h2,
h3,
h4,
h5,
h6 {
     margin: 0 0 0.75rem 0;
}

h1 {
     font-family: var(--font-1-heading);
     font-size: clamp(2.1rem, 3vw, 2.6rem);
     line-height: 1.2;
     color: var(--color-1);
}

h2 {
     font-family: var(--font-2-subheading);
     font-size: clamp(1.4rem, 2.2vw, 1.9rem);
     font-weight: 600;
     line-height: 1.3;
     color: var(--shade-1);
}

h3 {
     font-family: var(--font-2-subheading);
     font-size: clamp(1.1rem, 1.6vw, 1.35rem);
     font-weight: 600;
     line-height: 1.35;
     color: var(--color-2);
}

h4 {
     font-family: var(--font-4-script);
     font-size: 1.4rem;
     font-weight: 600;
     line-height: 1.2;
     color: var(--color-2);
}

p {
     margin: 0 0 1rem 0;
}

hr {
     margin: 1rem 0;
     border: 0;
     border-top: 1px solid var(--color-3);
}

ul {
     margin: 0.2rem 0 1rem 0.5rem;
     padding-left: 1.1rem;
     color: var(--shade-3);
     font-size: 0.96rem;
     line-height: 1.6;
}

ol {
     margin: 0.7rem 0 1rem 1.5rem;
     padding-left: 0.5rem;
}

ol li {
     font-weight: 500;
     line-height: 1.7;
}

ol li a {
     color: inherit;
}

.red {
     color: var(--red-2);
}

.red-2 {
     color: var(--red-3);
}

.bold {
     font-weight: 600;
}

.bold-small {
     font-size: 0.8rem;
     font-weight: 600;
}

.read-on {
     margin-top: 0.75rem;
     font-weight: 600;
     color: var(--color-2);
     text-decoration: none;
}

.read-on:hover {
     color: var(--color-3);
     text-decoration: underline;
}

.highlight,
.highlight a {
     font-size: 1.1rem;
     font-weight: 600;
     color: var(--red-1);
     text-decoration: none;
     padding: 0;
}

.highlight:hover,
.highlight a:hover {
     color: var(--color-3);
     text-decoration: none;
}

/* =======================
   TABLET
========================== */

@media (max-width: 960px) {
     h1 {
          font-size: clamp(1.9rem, 3vw, 2.3rem);
     }

     h2 {
          font-size: clamp(1.3rem, 2.4vw, 1.7rem);
     }

     h3 {
          font-size: clamp(1.05rem, 1.8vw, 1.25rem);
     }
}

/* =======================
   MOBILE
========================== */

@media (max-width: 768px) {

     html,
     body {
          font-size: 0.98rem;
     }

     h1 {
          font-size: 1.5rem;
          line-height: 1.25;
     }

     h2 {
          font-size: 1.25rem;
          line-height: 1.3;
     }

     h3 {
          font-size: 1.05rem;
          line-height: 1.35;
     }

     h4 {
          font-size: 1.2rem;
     }

     ul,
     ol {
          margin-bottom: 1rem;
     }

     .highlight,
     .highlight a {
          font-size: 1rem;
     }
}


/* ==============================================================================================
	theme.css		This is my theme css
=============================================================================================== */

:root {
	--font-1-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	--font-2-subheading: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	--font-3-body: 'Work Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	--font-4-script: 'Courgette', cursive;
	--font-5-script: 'Dancing Script', cursive;

	--color-1: #003480;
	--color-2: #006eba;
	--color-3: #5fbee5;
	--color-4: #e3eff8;

	--accent-1: #ff8200;
	--accent-2: #ffb400;
	--accent-3: #ffef00;
	--accent-4: #fffeaa;

	--shade-1: #060d30;
	--shade-2: #2e3651;
	--shade-3: #5b6475;
	--shade-4: #cccccc;

	--light-1: #ffffff;
	--light-2: #f6fafd;

	--red-1: #bf0000;
	--red-2: #ff0000;
	--red-3: #ff3300;

	--bg-1: #f5f7fb;
	--bg-2: #edf4fa;
	--bg-footer: #00408c;

/* --------------------------------------------------
	GRADIENT 1		Clean horizontal brand gradient
	Best for:		buttons, headers, navbars, CTA strips
-------------------------------------------------- */

	--gradient-1: linear-gradient(
		90deg,
		var(--color-1) 0%,
		var(--color-2) 100%
	);

/* --------------------------------------------------
	GRADIENT 2		Smooth premium blend
	Best for:		hero sections, cards, feature panels
-------------------------------------------------- */

	--gradient-2: linear-gradient(
		135deg,
		var(--color-1) 0%,
		color-mix(in srgb, var(--color-1), var(--color-2) 50%) 45%,
		var(--color-2) 100%
	);

/* --------------------------------------------------
   GRADIENT 3		Soft atmospheric gradient
   Best for:		page backgrounds, large sections, footer areas
-------------------------------------------------- */

	--gradient-3:
		radial-gradient(
			circle at top left,
			color-mix(in srgb, var(--color-3), white 35%) 0%,
			transparent 40%
		),

		radial-gradient(
			circle at bottom right,
			color-mix(in srgb, var(--color-1), black 10%) 0%,
			transparent 45%
		),

		linear-gradient(
			180deg,
			var(--bg-1) 0%,
			var(--bg-2) 100%
		);			   

/* --------------------------------------------------
   GRADIENT 4      Warm accent glow gradient
   Best for:       hero sections, call-to-action areas,
                   feature blocks, landing page headers
-------------------------------------------------- */

--gradient-4:
	radial-gradient(
		circle at top left,
		color-mix(in srgb, var(--accent-1), white 25%) 0%,
		transparent 35%
	),

	radial-gradient(
		circle at top right,
		color-mix(in srgb, var(--accent-2), white 20%) 0%,
		transparent 40%
	),

	radial-gradient(
		circle at bottom center,
		color-mix(in srgb, var(--accent-3), white 15%) 0%,
		transparent 45%
	),

	linear-gradient(
		135deg,
		var(--bg-1) 0%,
		var(--bg-2) 100%
	);

/* --------------------------------------------------
   GRADIENT 5      Brand + Accent Fusion
   Best for:       Hero sections, featured content,
                   premium call-to-action areas
-------------------------------------------------- */

--gradient-5:
	radial-gradient(
		circle at top left,
		color-mix(in srgb, var(--color-3), white 20%) 0%,
		transparent 40%
	),

	radial-gradient(
		circle at top right,
		color-mix(in srgb, var(--accent-1), white 25%) 0%,
		transparent 35%
	),

	radial-gradient(
		circle at bottom left,
		color-mix(in srgb, var(--accent-3), white 15%) 0%,
		transparent 45%
	),

	linear-gradient(
		135deg,
		var(--color-1) 0%,
		var(--color-2) 45%,
		var(--color-3) 100%
	);

/* --------------------------------------------------
   GRADIENT		END
-------------------------------------------------- */

	--radius: 24px;
	--radius-xl: 32px;

	--shadow:
		0 6px 16px rgba(9, 37, 77, 0.18),
		0 14px 36px rgba(9, 37, 77, 0.10);

	--shadow-btn: 0 6px 14px rgba(0, 0, 0, 0.18);

	--shadow-btn-hover: 0 12px 24px rgba(0, 0, 0, 0.22);

	--shadow-btn-xl:
		0 4px 8px rgba(0, 0, 0, 0.18),
		0 10px 25px rgba(0, 0, 0, 0.20);

	--shadow-btn-xl-hover:
		0 6px 12px rgba(0, 0, 0, 0.20),
		0 14px 32px rgba(0, 0, 0, 0.22);
}

/* ==============================================================================================
	main.css		This is my main css
=============================================================================================== */

.wrapper-below-header {
     display: grid;
     grid-template-rows: 1fr auto;
     min-height: 100vh;
     padding-top: 7rem;
}

.container {
     display: grid;
     grid-template-columns: repeat(12, 1fr);
     gap: 1.5rem;
     width: 100%;
     max-width: 1280px;
     margin: 0 auto;
     padding: 0 1rem;
}

main {
     width: 100%;
}

section {
     background: var(--light-1);
     padding: 1rem;
     border-radius: var(--radius);
     box-shadow: var(--shadow);
}

section .no-bg {
     background: none;
     padding: 0;
     box-shadow: none;
}

h1.no-bg {
     justify-self: start;
     margin-left: 2rem;
}
.row-grid {
     display: grid;
     grid-template-columns: repeat(12, 1fr);
	 grid-column: 1 / span 12;
     gap: 1.5rem;
}

.row-1 {
     margin: 0.5rem 0;
     padding: 1.5rem 1rem;
     background-color: var(--light-1);
     border-radius: var(--radius-xl);
     box-shadow: var(--shadow);
}

.mid {
     grid-column: 4 / span 6;
}

.span-4 {
     grid-column: span 4;
}

.span-4-left {
     grid-column: 1 / span 4;
}

.span-4-right {
     grid-column: 9 / span 4;
}

.span-5-right {
     grid-column: 8 / span 5;
}

.span-6-left {
     grid-column: 1 / span 6;
}

.span-6-right {
     grid-column: 7 / span 6;
}

.span-7-left {
     grid-column: 1 / span 7;
}

.span-8-left {
     grid-column: 1 / span 8;
}

.span-8-right {
     grid-column: 5 / span 8;
}

.span-12 {
     grid-column: 1 / span 12;
}

.mid,
.span-4,
.span-4-left,
.span-4-right,
.span-5-right,
.span-6-left,
.span-6-right,
.span-7-left,
.span-8-left,
.span-8-right,
.span-12 {
     margin: 0.5rem 0;
     padding: 1.5rem 3rem;
     background-color: var(--light-1);
     border-radius: var(--radius-xl);
     box-shadow: var(--shadow);
}

/* --------------------------------
	ERROR 404
----------------------------------- */

.error-404-side h2 {
     margin-bottom: 1rem;
}

.error-404-side p:last-child {
     margin-bottom: 0;
}

/* .row-btn {
   display: grid;
   grid-template-columns: 1fr 1fr;
     justify-content: center;
     gap: 1rem;
     margin-top: 1rem;
} */
/* --------------------------------
	BUTTON   GROUP CONTAINER
----------------------------------- */

.row-btn {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
   gap: 1rem;
   margin-top: 1rem;
   align-items: center;
}

.col-btn {
   display: grid;
   grid-template-columns: 1fr;
   gap: 0.1rem;
   margin-top: 10rem;
}


/* =======================
   TABLET
========================== */

@media (max-width: 960px) {

	.row-1 .span-5-right {
		order: 1;
	}

	.row-1 .span-7-left {
		order: 2;
	}

	.mid {
		grid-column: 2 / span 10;
		padding: 1.5rem 1.25rem;
		margin-block: 2rem;
	}

}

/* =======================
   MOBILE
========================== */

@media (max-width: 768px) {
     .wrapper-below-header {
          padding-top: 5rem;
     }

     .container {
          gap: 1rem;
          padding: 0 0.75rem;
          max-width: 100%;
     }

     .mid,
     .span-4,
     .span-4-left,
     .span-4-right,
     .span-5-right,
     .span-6-left,
     .span-6-right,
     .span-7-left,
     .span-8-left,
     .span-8-right,
     .span-12 {
          grid-column: span 12;
          padding: 1.25rem 1rem;
          margin: 0.5rem 0;
     }

   .row-btn {
      grid-template-columns: 1fr;
   }

}

/* ==============================================================================================
	btn.css		This is my buttons css
=============================================================================================== */

.btn {
     display: inline-block;
     color: var(--light-1);
     font-size: 0.96rem;
     font-weight: 600;
     text-decoration: none;
     text-align: center;
     line-height: 1.2;
     padding: 0.7rem 1.45rem;
     border: 2px solid transparent;
     border-radius: 999px;
     box-shadow: var(--shadow-btn);
     cursor: pointer;
     transition:
          transform 0.18s ease,
          box-shadow 0.18s ease,
          background-color 0.18s ease,
          color 0.18s ease,
          border-color 0.18s ease;
}

/* -----------------------------
     BTN-1
-------------------------------- */

.btn-1 {
     color: var(--light-1);
     font-size: 1.1rem;
     background: var(--color-1);
     margin: 1.5rem 0 0 0;
     padding: 1rem 1.5rem;
     border: 2px solid var(--color-1);
}

.btn-1-outline {
     color: var(--color-1);
     font-size: 1.1rem;
     background: var(--light-1);
     margin: 1.5rem 0 0 0;
     padding: 1rem 1.5rem;
     border: 2px solid var(--color-1);
}

.btn-1-outline-2 {
     color: var(--light-1);
     font-size: 1.1rem;
     background: var(--color-1);
     margin: 1.5rem 0 0 0;
     padding: 1rem 1.5rem;
     border: 2px solid var(--light-1);
}

.btn-1-accent {
     color: var(--color-1);
     font-size: 1.1rem;
     background: var(--accent-2);
     margin: 1.5rem 0 0 0;
     padding: 1rem 1.5rem;
     border: 2px solid var(--accent-2);
}

.btn-1:hover,
.btn-1-accent:hover,
.btn-1-outline:hover,
.btn-1-outline-2:hover {
     text-decoration: none;
     color: var(--light-1);
     background-color: var(--color-2);
     border-color: var(--color-2);
     transform: translateY(-2px);
     box-shadow: var(--shadow-btn-hover);
}

/* -----------------------------
     BTN-2
-------------------------------- */

.btn-2 {
     width: 100%;
     color: var(--light-1);
     background: var(--color-1);
     margin: 1.5rem 0 0 0;
     padding: 1rem 3rem;
     border: 2px solid var(--color-1);
}

.btn-2-outline {
     width: 100%;
     color: var(--color-1);
     background: transparent;
     margin: 1.5rem 0 0 0;
     padding: 1rem 3rem;
     border: 2px solid var(--color-1);
}

.btn-2:hover,
.btn-2-outline:hover {
     background-color: var(--color-2);
     border-color: var(--color-2);
     color: var(--light-1);
     transform: translateY(-1px);
}

/* -----------------------------
     BTN-3
-------------------------------- */

.btn-3 {
     color: var(--color-1);
     font-size: 1.1rem;
     background: var(--accent-4);
     margin: 1.5rem 0 0 0;
     padding: 0.75rem 1.5rem;
     border: 2px solid var(--color-1);
}

.btn-3:hover {
     background-color: var(--color-2);
     border-color: var(--color-2);
     transform: translateY(-1px);
}

/* -----------------------------
     BTN-STATE
-------------------------------- */

.btn-state {
     width: 100%;
     font-size: 1rem;
     text-align: left;
     background: var(--color-1);
     margin: 1rem 0 0 0;
     padding: 1rem 3rem;
     border: 2px solid var(--color-1);
}

.btn-state:hover {
     background-color: var(--color-2);
     border-color: var(--color-2);
     transform: translateY(-1px);
}

.states {
     padding: 1rem 1rem;
}

.states h1 {
     font-size: 1.7rem;
     margin: 0 0 1rem 0;
}

/* -----------------------------
     BTN-NAME
-------------------------------- */

.btn-name {
     background: var(--gradient-1);
     padding: 1rem;
     border: 3px solid var(--light-1);
     box-shadow: var(--shadow-btn-xl);
}

.btn-name h1 {
     color: var(--light-1);
     margin: 0;
     line-height: 1;
}
/* -----------------------------
     BTN-XL
-------------------------------- */

.btn-xl {
     background-color: var(--color-1);
     padding: 1rem 3rem;
     border: 3px solid var(--light-1);
     box-shadow: var(--shadow-btn-xl);
}

.btn-xl:hover {
     background-color: var(--color-2);
     box-shadow: var(--shadow-btn-xl-hover);
     transform: translateY(-1px);
}

.btn-xl h1 {
     color: var(--light-1);
}
/* -----------------------------

/* =============================
   TABLET
========================= */

@media (max-width: 960px) {}
	.btn-tbl {
		width: 4rem;
  }

/* =========================
   MOBILE
============================ */

@media (max-width: 768px) {

     .btn {
          display: block;
          width: 100%;
          grid-column: 1 / span 12;
     }

     .btn-1,
     .btn-1-outline,
     .btn-1-outline-2,
     .btn-1-accent,
     .btn-2,
     .btn-2-outline,
     .btn-3,
     .btn-state,
     .btn-name,
     .btn-xl {
          width: 100%;
          grid-column: 1 / span 12;
     }



     .btn-1,
     .btn-1-outline,
     .btn-1-outline-2,
     .btn-1-accent,
	 .btn-2,
	 .btn-2-outline,
     .btn-3 {
          font-size: 1rem;
		  padding: 1rem;

     }

     .btn-xl {
          padding: 1rem;
     }

	.btn-tbl {
		width: 4rem;
		height: 1.25rem;
	}

}
.site-header {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     width: 100%;
     height: 3.2rem;
     background: linear-gradient(135deg,
               var(--color-1) 0%,
               var(--color-3) 55%,
               var(--color-1) 100%);
     z-index: 1000;
}

.logo-wrapper {
     grid-column: span 2;
     /* align-self: center; */
     padding: 0.5rem 0;
}

.logo {
     width: 7rem;
     align-self: center;
}

.icon-wrapper {
     grid-column: span 2;
     justify-self: end;
     align-self: center;
}

.icon {
     width: 5rem;
}

.icon:hover {
     opacity: 0.7;
}



/* =======================
   TABLET
========================== */

@media (max-width: 960px) {
     .site-header .logo-wrapper {
          grid-column: span 4;
     }

     .site-header .logo {
          width: 8rem;
          height: auto;
     }

     .site-header .icon-wrapper {
          grid-column: span 4;
          justify-self: end;
     }

     .site-header .icon {
          width: 2.5rem;
          height: auto;
     }

}



/* =======================
   MOBILE
========================== */

@media (max-width: 768px) {
     .site-header .logo {
          width: 7rem;
          height: auto;
     }

     .site-header .icon {
          width: 5rem;
          height: auto;
     }
}header nav {
     grid-column: 3 / span 8;
     display: grid;
     grid-auto-flow: column;
     grid-auto-columns: max-content;
     justify-content: center;
     align-items: center;
     gap: 1rem;
}

header nav a {
     color: var(--light-1);
     font-size: 0.9rem;
     font-weight: 500;
     text-decoration: none;
     background: transparent;
     padding: 0.3rem 1rem;
     border: 1px solid var(--light-1);
     border-radius: 999px;
     transition: background-color 0.45s;
}

header nav a:hover {
     background-color: var(--color-2);
     color: var(--light-1);
}

header nav a:nth-child(5) {
     color: var(--accent-3);
     border: 1px solid var(--accent-3);
}

header nav a:nth-child(5):hover {
     background-color: var(--color-2);
}

/* TOGGLE =================== */
#menu-icon {
     grid-column: span 1;
     font-size: 40px;
     color: var(--light-1);
     z-index: 10001;
     cursor: pointer;
     display: none;
}

/* TOGGLE =================== */


/* MOBILE =================== */
/* MOBILE =================== */
/* MOBILE =================== */

@media (max-width: 960px) {
     header nav {
          /* grid-column: 3 / span 8; */
          display: grid;
          grid-template-columns: 1fr;
          justify-self: center;
          align-self: center;
          position: absolute;
          top: -800px;
          left: 0;
          right: 0;
          text-align: left;
          background: var(--color-2);
          transition: all .50s ease;
          margin: 1rem;
          padding: 1rem;
          border: 1px solid var(--light-1);
          border-radius: 5px;
     }

     header nav a {
          /* grid-column: span 4; */
          display: block;
          font-size: 1rem;
          font-weight: 600;
          color: var(--light-1);
          background: var(--color-1);
          margin: 0.25rem;
          padding: 0.5rem 1.5rem;
          border: 1px solid var(--light-1);
          border-radius: 20px;
     }

     header nav a:hover {
          background: var(--color-3);
     }

     header nav a:nth-child(5):hover {
          background: var(--color-3);
     }

     /* TOGGLE =================== */
     #menu-icon {
          grid-column: span 4;
          justify-self: center;
          display: block;
     }

     nav.open {
          grid-column: 4 / span 6;
          top: 100%;
          right: 2%;
     }

     /* TOGGLE =================== */
}


/* MOBILE 2 =================== */
/* MOBILE 2 =================== */

@media (max-width: 768px) {

     /* show the hamburger icon on mobile and center it */
     #menu-icon {
          display: block;
          grid-column: 5 / span 4;
          /* centered block in a 12-col grid */
          justify-self: center;
          align-self: center;
          z-index: 10001;
     }

     /* make nav dropdown sit below the header row */
     header nav {
          grid-column: 1 / -1;
          display: none;

          grid-auto-flow: row;
          grid-auto-columns: 1fr;
          grid-template-columns: 1fr;

          justify-content: start;
          justify-items: start;

          margin-top: 0.75rem;
     }

     /* @media (max-width: 768px) { */
     header nav a {
          display: block;
          width: 100%;
          box-sizing: border-box;

          text-align: center;
          /* or left if you prefer */
          /* padding: 0.75rem 1rem; */
          border-radius: 12px;
     }

     /* } */

     header nav.open {
          display: grid;
     }
}footer {
     width: 100%;
     color: var(--light-1);
     font-size: 0.8rem;
     background-color: var(--color-1);
     margin-top: 2rem;
     padding: 1rem 0 2rem 0;
}

.copyright-row-wrapper>* {
     grid-column: span 3;
     padding: 1rem;
}

.copyright-row-wrapper div {
     text-align: center;
     color: var(--accent-4);
}

/* =========================
   SOCIAL MEDIA PANEL
========================= */

.footer-social {
   display: grid;
   grid-auto-flow: column;
   justify-content: center;
   align-items: center;
   gap: 0.75rem;
}

.footer-social a {
   display: grid;
   place-items: center;
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 0.5rem;
   background: rgba(255,255,255,0.08);
   transition: opacity 0.25s ease, transform 0.25s ease;
}

.footer-social a:hover {
   opacity: 0.75;
   transform: translateY(-2px);
}


/* =========================
   TABLET
========================= */

@media (max-width: 960px) {}

/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {
     footer {
          font-size: 0.7rem;
     }

     .copyright-row-wrapper>* {
          grid-column: span 12;
          padding: 0.5rem 0 0 0;
     }

     .sectigo {
          max-width: 5rem;
     }
}
/* Each Links component root becomes a 3-column card in the 12-col grid */
.links-row-wrapper {
     gap: 0.5rem;
}

/* .links-row-wrapper>* {
     grid-column: span 3;
     display: grid;
     background-color: var(--bg-footer);
     padding: 1rem;
} */

.links-row-wrapper>* {
     grid-column: span 3;
     display: grid;
     /* gap: 0.2rem; */
     background-color: var(--bg-footer);
     padding: 1rem;
     border-radius: 1rem;
}

.links-row-wrapper h3 {
     font-size: 0.9rem;
     font-weight: 600;
     color: var(--accent-4);
     margin-bottom: 0.75rem;
     text-transform: uppercase;
     letter-spacing: 0.05rem;
}

.links-row-wrapper>*>div:last-of-type {
     display: grid;
     gap: 0.5rem;
     align-content: start;
     padding: 0 0 0 1rem;
}

.links-row-wrapper>*>div:last-of-type a {
     display: inline-block;
     font-size: 0.9rem;
     text-decoration: none;
     color: var(--shade-6);
}

.links-row-wrapper>*>div:last-of-type a:hover {
     color: var(--accent-5);
     text-decoration: underline;
}

/* =========================
   TABLET
========================= */

@media (max-width: 960px) {}

/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

     .links-row-wrapper {
          gap: 0.2rem;
     }

     .links-row-wrapper>* {
          grid-column: span 6;
          padding: 0.5rem 0 0.5rem 0.2rem;
     }

     .links-row-wrapper>*>div:last-of-type {
          /* display: grid; */
          gap: 0.2rem;
          /* align-content: start; */
          padding: 0 0 0 0.3rem;
     }

     .links-row-wrapper>*>div:last-of-type a {
          font-size: 0.8rem;
     }
}