/*
Editor Style for Clarified Theme
This stylesheet affects the WordPress editor's look and feel to ensure consistency with the front-end design of the Clarified theme.

Theme Name: Clarified
Author: Rough Pixels
Author URI: https://www.roughpixels.com
Description: Editor styles for the Clarified theme, designed to provide a consistent editing experience that matches the theme's front-end styling.
Version: 1.0.0
*/

/* Oswald - variable */
@font-face {
  font-family: "Oswald";
  font-display: swap;
  font-style: normal;
  font-weight: 200 700;
  /* Super Modern Browsers */
  src: url("../fonts/Oswald-VariableFont_wght.woff2") format("woff2"),
    /* Modern Browsers */ url("../fonts/Oswald-VariableFont_wght.woff")
      format("woff");
}

/* Root Variables
  ==================================================== */
:root {
  /* Font Families */
  --clarified-primary-font: "Segoe UI", "Helvetica Neue", Arial, "Noto Sans",
    "Liberation Sans", sans-serif, system-ui, -apple-system, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  --clarified-secondary-font: Oswald, Impact, "Segoe UI", "Helvetica Neue",
    "Arial Narrow", "Noto Sans", "Liberation Sans", sans-serif, system-ui,
    -apple-system, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";

  --clarified-serif-font: Georgia, serif;

  /* Colours */
  --clarified-primary: #5381b4;
  --clarified-secondary: #c8dff7;
  --clarified-tertiary: #c39239;
  --clarified-beige: #cdc0a9;
  --clarified-dark: #2d3136;
  --clarified-body: #f6f2ee;
  --clarified-content-bg: #fff;
  --clarified-text: #595959;
  --clarified-secondary-text: #8f97a0;
  --clarified-headings: #444;
  --clarified-links: #c39239;
  --clarified-hover-links: #c39239;

  --clarified-grey-100: #f8f9fa;
  --clarified-grey-200: #e9ecef;
  --clarified-grey-300: #dee2e6;
  --clarified-grey-400: #ced4da;
  --clarified-grey-500: #adb5bd;
  --clarified-grey-600: #6c757d;
  --clarified-grey-700: #495057;
  --clarified-grey-800: #343a40;
  --clarified-grey-900: #212529;

  --clarified-hover-opacity: 0.7;
  --clarified-widget-bg: #f7f7f7;
  --clarified-lines: #dae1e8;

  --clarified-table-header-bg: var(--clarified-grey-700);
  --clarified-table-header-text: #fff;

  /* Border radius */
  --clarified-border-radius: 0.75rem;

  /* Media */
  --clarified-img-bg: #fff;
  --clarified-img-radius: 0.25rem;
  --clarified-img-border-color: #ccc;
  --clarified-img-padding: 0.313rem;
  --clarified-img-placeholder-text: 1.125rem;
  --clarified-caption-text: #8c959d;

  /* Forms */
  --clarified-btn: #5381b4;
  --clarified-btn-hover: #4c77a6;
}

/* Base
==================================================== */
html {
  font-size: 17px;
}

body#tinymce {
  padding-inline: 1rem !important;
}

/* Classic and Block Editor Text content */
body#tinymce.wp-editor.content,
.editor-styles-wrapper {
  background-color: var(--clarified-content-bg);

  color: var(--clarified-text);
  font-family: var(--clarified-primary-font);
  font-size: 1rem;
  height: 100%;
  line-height: 1.5;
  margin: 2rem auto;
  padding: 2rem 0.75rem;
  overflow-x: hidden;
  -ms-word-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

/* Targeting paragraph blocks in the block editor */
.editor-styles-wrapper p {
  font-size: 17px;
  font-family: var(--clarified-primary-font);
  line-height: 1.5;
}

body#tinymce.wp-editor.content * {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

/* Setting default content width for the block editor */
body#tinymce.wp-editor.content,
.editor-styles-wrapper .wp-block,
/* Ensure the main editor content adheres to the width */
.editor-styles-wrapper,
.wp-block-post-content {
  max-width: 735px;
  margin-inline: auto;
}

body#tinymce.page-template-template-full.wp-editor.content {
  max-width: 1150px;
  margin-inline: auto;
}

/* Typography
  ==================================================== */
body#tinymce.wp-editor.content p {
  margin-bottom: 1.5rem;
}

/* Headings */
body#tinymce.wp-editor.content h1,
body#tinymce.wp-editor.content h2,
body#tinymce.wp-editor.content h3,
body#tinymce.wp-editor.content h4,
body#tinymce.wp-editor.content h5,
body#tinymce.wp-editor.content h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--clarified-headings);
  font-family: var(--clarified-secondary-font);
  margin-top: 0;
  margin-bottom: 1rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
}

.h1,
h1,
body#tinymce.wp-editor.content h1 {
  font-size: 2rem;
}

.h2,
h2,
body#tinymce.wp-editor.content h2 {
  font-size: 1.75rem;
}

.h3,
h3,
body#tinymce.wp-editor.content h3 {
  font-size: 1.5rem;
}

.h4,
h4,
body#tinymce.wp-editor.content h4 {
  font-size: 1.25rem;
}

.h5,
h5,
body#tinymce.wp-editor.content h5 {
  font-size: 1.125rem;
}

.h6,
h6,
body#tinymce.wp-editor.content h6 {
  font-size: 1rem;
}

/* Lead */
body#tinymce.wp-editor.content .lead {
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.3;
}

/* Paragraph */
body#tinymce.wp-editor.content p {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

/* Text elements */
sup,
sub {
  font-size: 70%;
}

/* Links */
body#tinymce.wp-editor.content a {
  color: var(--clarified-links);
  font-weight: 500;
  text-underline-offset: 0.188rem;
}

/* Text Sizing */
.has-extra-small-font-size {
  font-size: 0.875rem;
}

.has-small-font-size {
  font-size: 1rem;
}

.has-medium-font-size {
  font-size: 1.125rem;
}

.has-large-font-size {
  font-size: 1.25rem;
  line-height: 1.5;
}

.has-extra-large-font-size {
  font-size: 1.375rem;
  line-height: 1.3;
}

.has-huge-font-size {
  font-size: 1.625rem;
  line-height: 1.3;
}

.has-gigantic-font-size {
  font-size: 2rem;
  line-height: 1.3;
}

/* Blockquotes */
body#tinymce.wp-editor.content blockquote,
body#tinymce.wp-editor.content .blockquote {
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.3;
  margin: 2rem;
  position: relative;
}

body#tinymce.wp-editor.content blockquote::before,
body#tinymce.wp-editor.content blockquote,
body#tinymce.wp-editor.content .blockquote {
  font-family: var(--clarified-serif-font);
}

body#tinymce.wp-editor.content blockquote > :last-child,
body#tinymce.wp-editor.content .blockquote > :last-child {
  margin-bottom: 0;
}

body#tinymce.wp-editor.content .blockquote-footer {
  margin-top: -1rem;
  margin-bottom: 1rem;
  font-size: 0.875em;
  color: #6c757d;
}

body#tinymce.wp-editor.content blockquote::before {
  color: var(--clarified-primary);
  content: "\201C";
  font-size: 18rem;
  line-height: 1;
  position: absolute;
  top: -3rem;
  z-index: 1;
  left: -3rem;
  opacity: 0.12;
}

body#tinymce.wp-editor.content figcaption.blockquote-footer {
  text-align: left;
}

body#tinymce.wp-editor.content blockquote cite::before {
  content: "\2014";
}

/* Targeting blockquote specifically */
.editor-styles-wrapper .block-editor-block-list__layout.wp-block-quote {
  max-width: 735px;
  margin-inline: auto;
}

/* Common styles for blockquotes and pullquotes */
.wp-block-quote,
.wp-block-pullquote {
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.3;
  margin: 2rem;
  position: relative;
  font-family: var(--clarified-serif-font);
}

.wp-block-quote p {
  font-family: var(--clarified-serif-font);
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.4;
}

/* Remove borders from pullquotes */
.wp-block-pullquote {
  border: none;
}

/* Style for large quotation mark */
.wp-block-quote::before,
.wp-block-pullquote::before {
  color: var(--clarified-primary);
  content: "\201C";
  font-size: 18rem;
  line-height: 1;
  position: absolute;
  top: -3rem;
  left: -3rem;
  opacity: 0.12;
  z-index: 1;
}

/* Adjusting the last child margin in blockquotes */
.wp-block-quote > :last-child,
.wp-block-pullquote > :last-child {
  margin-bottom: 0;
}

/* Citation style */
.wp-block-quote .wp-block-quote__citation::before,
.wp-block-pullquote .wp-block-pullquote__citation::before,
.wp-block-pullquote cite::before,
.wp-block-pullquote footer::before {
  content: "\2014\0020"; /* En dash followed by space */
}

/* Adjustments for pullquote alignments */

.editor-styles-wrapper .wp-block-pullquote {
  border: none;
  max-width: 300px;
  text-align: left;
  padding: 0;
}

/* Float left-aligned pullquotes to the left */
.editor-styles-wrapper .wp-block-pullquote.alignleft {
  float: left;
  margin-right: 1em;
  max-width: 50%;
}

/* Float right-aligned pullquotes to the right */
.editor-styles-wrapper .wp-block-pullquote.alignright {
  float: right;
  margin-left: 1em;
  max-width: 50%;
}

/* Removing border from blockquotes and pullquotes */
.editor-styles-wrapper .wp-block-quote,
.editor-styles-wrapper .wp-block-pullquote {
  border: none;
}

/* Combined Styles for Lists in Both Editors */
body#tinymce.wp-editor.content ul,
body#tinymce.wp-editor.content ol,
.editor-styles-wrapper ul,
.editor-styles-wrapper ol {
  font-family: var(--clarified-primary-font);
  padding-left: 2rem;
  line-height: 1.5;
}

/* Specific Styles for Unordered Lists */
body#tinymce.wp-editor.content ul,
.editor-styles-wrapper ul {
  list-style: disc;
}

/* Specific Styles for Ordered Lists */
body#tinymce.wp-editor.content ol,
.editor-styles-wrapper ol {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

/* Nested Lists Inside List Items */
body#tinymce.wp-editor.content li > ul,
body#tinymce.wp-editor.content li > ol,
.editor-styles-wrapper li > ul,
.editor-styles-wrapper li > ol {
  margin-bottom: 0;
  list-style-type: circle;
}

/* Other Element Styles */
body#tinymce.wp-editor.content del,
.editor-styles-wrapper del {
  opacity: 0.8;
}

body#tinymce.wp-editor.content address,
.editor-styles-wrapper address {
  font-style: italic;
  margin: 0 0 1.875rem;
}

body#tinymce.wp-editor.content dl,
.editor-styles-wrapper dl {
  border-top: 1px solid var(--clarified-grey-300);
  display: block;
  margin: 2rem 0;
}

body#tinymce.wp-editor.content dt,
.editor-styles-wrapper dt {
  font-weight: 700;
}

body#tinymce.wp-editor.content dd,
.editor-styles-wrapper dd {
  font-style: italic;
  margin-bottom: 0;
  margin-left: 0;
}

body#tinymce.wp-editor.content dt,
body#tinymce.wp-editor.content dd,
dt,
dd {
  border-bottom: 1px solid var(--clarified-grey-300);
  padding: 0.438rem 0;
  font-size: 0.875rem;
}

body#tinymce.wp-editor.content .text-truncate,
.editor-styles-wrapper .text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Block text colours */

.has-dark-background-color {
  background: var(--clarified-dark);
}

.has-white-background-color {
  background: #fff;
}

.has-primary-background-color {
  background: var(--clarified-primary);
}

.has-secondary-background-color {
  background: var(--clarified-secondary);
}

.has-tertiary-background-color {
  background: var(--clarified-tertiary);
}

.has-dark-color,
.has-dark-color .has-inline-color {
  color: var(--clarified-dark);
}

.has-white-color,
.has-white-color .has-inline-color {
  color: #fff;
}

.has-primary-color,
.has-primary .has-inline-color {
  color: var(--clarified-primary);
}

.has-secondary-color,
.has-secondary-color .has-inline-color {
  color: var(--clarified-secondary);
}

.has-tertiary-color,
.has-tertiary .has-inline-color {
  color: var(--clarified-tertiary);
}

/* Text Sizing */
.has-extra-small-font-size {
  font-size: 0.875rem;
}

.has-small-font-size {
  font-size: 1rem;
}

.has-medium-font-size {
  font-size: 1.125rem;
}

.has-large-font-size {
  font-size: 1.25rem;
  line-height: 1.5;
}

.has-extra-large-font-size {
  font-size: 1.375rem;
  line-height: 1.3;
}

.has-huge-font-size {
  font-size: 1.625rem;
  line-height: 1.3;
}

.has-gigantic-font-size {
  font-size: 2rem;
  line-height: 1.3;
}

.entry-content .wp-block-buttons {
  margin-bottom: 1.5rem;
}

/* Inline elements */
body#tinymce.wp-editor.content .mark,
body#tinymce.wp-editor.content mark,
mark {
  padding: 0.188rem;
  color: #222;
  background-color: #fff3cd;
}

body#tinymce.wp-editor.content .initialism {
  font-size: 90%;
  text-transform: uppercase;
}

body#tinymce.wp-editor.content code,
body#tinymce.wp-editor.content kbd,
body#tinymce.wp-editor.content pre,
body#tinymce.wp-editor.content samp {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  font-size: 0.813rem;
  direction: ltr;
  /* rtl:ignore */
  unicode-bidi: bidi-override;
  font-size: 1em;
}

body#tinymce.wp-editor.content kbd,
.editor-styles-wrapper kbd {
  background: var(--clarified-grey-800);
  border-radius: 0.125rem;
  color: #fff;
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.125rem 0.375rem;
  white-space: nowrap;
  position: relative;
  bottom: 0.125rem;
}

/* Code */
body#tinymce.wp-editor.content pre,
.wp-block-code {
  background: var(--clarified-grey-100);
  border: 1px solid var(--clarified-grey-300);
  display: block;
  overflow: auto;
  font-size: 0.875rem;
  margin: 1.5rem auto;
  padding: 1rem;
  white-space: break-spaces;
}

body#tinymce.wp-editor.content pre code,
pre code {
  background: transparent;
  font-size: inherit;
  color: inherit;
  padding: 0;
  word-break: normal;
}

body#tinymce.wp-editor.content code,
/* Block Editor Inline Code Styles */
code {
  font-size: 0.875em;
  color: #d63384;
  word-wrap: break-word;
}

/* Combined Table Styles for Both Classic and Block Editors */
body#tinymce.wp-editor.content table,
body#tinymce.wp-editor.content th,
body#tinymce.wp-editor.content td,
.editor-styles-wrapper table,
.editor-styles-wrapper th,
.editor-styles-wrapper td,
.wp-block-table {
  border: 1px solid var(--clarified-grey-200);
}

body#tinymce.wp-editor.content table,
.editor-styles-wrapper table,
.wp-block-table {
  font-family: var(--clarified-primary-font);
  border-collapse: collapse;
  border-spacing: 0;
  border-width: 1px 0 0 1px;
  margin: 1.5rem auto;
  table-layout: auto;
}

body#tinymce.wp-editor.content thead,
.editor-styles-wrapper thead,
.wp-block-table thead {
  background: var(--clarified-table-header-bg);
  color: var(--clarified-table-header-text);
  font-weight: 500;
}

/* Specific Styles for Table Head and Body Cells */
body#tinymce.wp-editor.content th,
body#tinymce.wp-editor.content td,
.editor-styles-wrapper th,
.editor-styles-wrapper td,
.wp-block-table th,
.wp-block-table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
}

/* Table Head Cell Borders */
body#tinymce.wp-editor.content th,
.editor-styles-wrapper th,
.wp-block-table th {
  border-width: 0 1px 1px 0;
}

/* Table Head Rows */
body#tinymce.wp-editor.content thead td,
.editor-styles-wrapper thead td,
.wp-block-table thead td {
  border-color: var(--clarified-grey-600);
}

body#tinymce.wp-editor.content td,
.editor-styles-wrapper td,
.wp-block-table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  font-size: 0.938rem;
}

/* Media
 ==================================================== */
body#tinymce.wp-editor.content figure {
  display: inline-block;
  margin: 0 0 1rem;
  position: relative;
}

.wp-block-image figcaption,
body#tinymce.wp-editor.content figcaption,
body#tinymce.wp-editor.content .wp-caption-text {
  font-size: 0.938rem;
  font-family: var(--clarified-primary-font);
  color: var(--clarified-caption-text);
  margin: 0.5rem 0;
  line-height: 1.2;
  text-align: center;
}

body#tinymce.wp-editor.content img {
  border-radius: 0.5rem;
  /* Responsive images */
  max-width: 100%;
  height: auto;
}

body#tinymce.wp-editor.content img {
  vertical-align: middle;
}

body#tinymce.wp-editor.content .img-box {
  padding: var(--clarified-img-padding);
  background-color: var(--clarified-img-bg);
  border: 1px solid var(--clarified-img-border-color);
  border-radius: var(--clarified-img-radius);
  max-width: 100%;
  height: auto;
}

body#tinymce.wp-editor.content .img-placeholder-text {
  font-size: var(--clarified-img-placeholder-text);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  text-anchor: middle;
}

/* Classic Gallery
   ==================================================== */
body#tinymce.wp-editor.content .gallery {
  display: grid;
  gap: 10px; /* Space between images */
  grid-template-columns: repeat(1, 1fr); /* 1 column on small screens */
  margin: 3rem 0 1rem;
}

/* Gallery item styles */
body#tinymce.wp-editor.content .gallery-item {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

/* Gallery image link */
body#tinymce.wp-editor.content .gallery-item a {
  display: block;
  border: none;
  padding: 0;
}

/* Gallery image */
body#tinymce.wp-editor.content .gallery-item img {
  width: 100%;
  height: auto;
  border: 2px solid #f0f0f0; /* Light gray border */
}

/* Clearfix for the gallery */
body#tinymce.wp-editor.content .gallery:after {
  content: "";
  display: table;
  clear: both;
}

/* Alignment
   ==================================================== */
body#tinymce.wp-editor.content .text-start {
  text-align: left !important;
}

body#tinymce.wp-editor.content .text-end {
  text-align: right !important;
}

body#tinymce.wp-editor.content .text-center {
  text-align: center !important;
}

body#tinymce.wp-editor.content .alignleft,
body#tinymce.wp-editor.content .float-start {
  float: left;
  margin: 0.375rem 2rem 0.5rem 0;
}

body#tinymce.wp-editor.content .alignright,
body#tinymce.wp-editor.content .float-end {
  float: right;
  margin: 0.375rem 0 0.5rem 2rem;
}

body#tinymce.wp-editor.content .aligncenter,
body#tinymce.wp-editor.content .float-center {
  margin: 1rem auto;
}

body#tinymce.wp-editor.content .alignnone,
body#tinymce.wp-editor.content .float-none {
  float: none;
}

/* MISC. ELEMENTS
  ==================================================== */
hr,
body#tinymce.wp-editor.content hr,
.wp-block-separator {
  border: none;
  border-bottom: 0.125rem solid var(--clarified-grey-400);
  margin: 3rem auto;
}

.wp-block-separator.alignwide,
.wp-block-separator.is-style-wide {
  width: 50%;
}

.wp-block-separator.alignfull,
.wp-block-separator.alignfull.is-style-wide {
  width: 100%;
}

.wp-block-separator.is-style-dots {
  background: none !important;
  border: none;
  text-align: center;
  line-height: 1;
  height: auto;
  margin: 2rem auto;
}

.wp-block-separator.is-style-dots:before {
  content: "···";
  color: currentColor;
  font-size: 2rem;
  letter-spacing: 2rem;
  padding-left: 2rem;
}

.wp-block-spacer {
  margin-top: 0;
  margin-bottom: 0;
}

/* Drop cap */
.has-drop-cap:not(:focus):first-letter {
  color: var(--clarified-primary);
  float: left;
  font-size: 6rem;
  line-height: 0.75;
  margin: 0.25rem 1rem 0 0;
  text-transform: uppercase;
  font-family: var(--clarified-serif-font);
  font-style: normal;
  font-weight: 700;
}

/* Forms
   ==================================================== */
body#tinymce.wp-editor.content input[type="text"],
body#tinymce.wp-editor.content input[type="password"],
body#tinymce.wp-editor.content input[type="email"],
body#tinymce.wp-editor.content input[type="number"],
body#tinymce.wp-editor.content input[type="search"],
body#tinymce.wp-editor.content input[type="tel"],
body#tinymce.wp-editor.content input[type="url"],
body#tinymce.wp-editor.content select {
  display: block;
  width: 100%; /* Full width for standalone use */
  padding: 0.375rem 1rem; /* Same padding as buttons */
  font-size: 1rem; /* Same font size as buttons */
  font-weight: 400; /* Same font weight as buttons */
  line-height: 1.5; /* Same line height as buttons */
  color: #495057; /* Slightly darker text for better contrast */
  background-color: #fff; /* White background */
  background-clip: padding-box;
  border: 1px solid #ced4da; /* Light grey border */
  border-radius: 0.313rem; /* Same border-radius as buttons */
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); /* Subtle inner shadow */
  font-family: var(--clarified-secondary-font); /* Consistent font family */
}

body#tinymce.wp-editor.content textarea {
  display: block;
  width: 100%; /* Full width for standalone use */
  padding: 0.375rem 1rem; /* Same padding as buttons and inputs */
  font-size: 1rem; /* Same font size as buttons and inputs */
  font-weight: 400; /* Same font weight as buttons and inputs */
  line-height: 1.5; /* Same line height as buttons and inputs */
  color: #495057; /* Slightly darker text for better contrast */
  background-color: #fff; /* White background */
  background-clip: padding-box;
  border: 1px solid #ced4da; /* Light grey border */
  border-radius: 0.313rem; /* Same border-radius as buttons and inputs */
  font-family: var(--clarified-secondary-font); /* Consistent font family */
  height: auto; /* Auto height to accommodate content */
  resize: vertical; /* Allow vertical resizing */
}

body#tinymce.wp-editor.content button,
body#tinymce.wp-editor.content input[type="submit"],
body#tinymce.wp-editor.content input[type="button"],
body#tinymce.wp-editor.content input[type="reset"],
.wp-block-button__link {
  background-color: var(--clarified-primary);
  display: inline-block;
  padding: 0.375rem 1rem;
  font-family: var(--clarified-secondary-font);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  border-radius: 0.313rem;
}

.wp-block-button .wp-block-button__link.is-style-outline,
.wp-block-button.is-style-outline > .wp-block-button__link {
  border: 1px solid var(--clarified-grey-400);
  border-radius: 0.313rem !important;
  line-height: 1.5;
  padding: 0.375rem 1rem;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  body#tinymce.wp-editor.content dl {
    display: grid;
    grid-template-columns: 30% 1fr;
    line-height: 1.2;
  }

  body#tinymce.wp-editor.content dt {
    padding-right: 1rem;
  }
  /* Gallery 2 columns for small devices (tablets, 576px and up) */
  .gallery-columns-2.gallery,
  .gallery-columns-3.gallery,
  .gallery-columns-4.gallery,
  .gallery-columns-5.gallery,
  .gallery-columns-6.gallery,
  .gallery-columns-7.gallery,
  .gallery-columns-8.gallery,
  .gallery-columns-9.gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  /* Gallery 3 columns for medium devices (desktops, 768px and up) */
  .gallery-columns-3.gallery,
  .gallery-columns-4.gallery,
  .gallery-columns-5.gallery,
  .gallery-columns-6.gallery,
  .gallery-columns-7.gallery,
  .gallery-columns-8.gallery,
  .gallery-columns-9.gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  /* Gallery 4 columns for large devices (large desktops, 992px and up) */
  .gallery-columns-4.gallery,
  .gallery-columns-5.gallery,
  .gallery-columns-6.gallery,
  .gallery-columns-7.gallery,
  .gallery-columns-8.gallery,
  .gallery-columns-9.gallery {
    grid-template-columns: repeat(4, 1fr);
  }
  .template-right .gallery-columns-5 .gallery-caption,
  .template-right .gallery-columns-6 .gallery-caption,
  .template-right .gallery-columns-7 .gallery-caption,
  .template-right .gallery-columns-8 .gallery-caption,
  .template-right .gallery-columns-9 .gallery-caption {
    display: none;
  }
}

/*  X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  /* Gallery 5, 6, 7, 8, and 9 columns for extra large devices */
  .gallery-columns-5.gallery {
    grid-template-columns: repeat(5, 1fr);
  }
  .gallery-columns-6.gallery {
    grid-template-columns: repeat(6, 1fr);
  }
  .gallery-columns-7.gallery {
    grid-template-columns: repeat(7, 1fr);
  }
  .gallery-columns-8.gallery {
    grid-template-columns: repeat(8, 1fr);
  }
  .gallery-columns-9.gallery {
    grid-template-columns: repeat(9, 1fr);
  }
}