/* ==========================================================================
   FRAMEWORK.CSS
   Modern browser reset, typography tokens, and 12-column Flexbox framework.

   Existing class names are retained. Grid gutters now use Flexbox gap rather
   than negative row margins and horizontal column padding.
   ========================================================================== */


/* ==========================================================================
      DESIGN TOKENS
      ========================================================================== */
   
   :root {
     /* Colours */
     --color-text: #8f945e;
     --color-heading: #5d622f;
     --color-background: #FFFFF7;
     --color-background-white: #fff;
     --color-background-creame: #F4F1E8;
     --color-background-hover:#E9E4D3;
     --color-border: #8f945e;
     --color-focus: #5d622f;
     --color-muted: #9c9c9c;
     --color-dark: #18323e;
   
     /* Typography */
     --font-family-body: "Work Sans", system-ui, -apple-system,
       BlinkMacSystemFont, "Segoe UI", sans-serif;
   
     --font-family-heading: "Fraunces", Georgia, "Times New Roman", serif;
   
     --font-size-root: 100%;
     --font-size-body: 1rem;
     --font-size-small: 0.75rem;
   
     /*
      * Desktop heading scale.
      */
      --font-size-h1: 3rem;    /* 48px */
      --font-size-h2: 3rem;    /* 48px */
      --font-size-h3: 2rem;    /* 32px */
      --font-size-h4: 1.5rem;  /* 24px */
      --font-size-h5: 1.25rem; /* 20px */
      --font-size-h6: 1.25rem; /* 20px */
   
     --font-weight-light: 300;
     --font-weight-regular: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
   
     --line-height-body: 1.5;
     --line-height-list: 1.25;
   
     --line-height-h1: 1.041667;
     --line-height-h2: 1.041667;
     --line-height-h3: 1.125;
     --line-height-h4: 1;
     --line-height-h5: 1.2;
     --line-height-h6: normal;
   
     /* Buttons */
     --button-height: 3rem;
     --button-padding-inline: 1.5rem;
     --button-border-width: 1px;
     --button-border-radius: 999px;

     /*
      * Shared slider navigation.
      *
      * Component styles may change positioning and visibility, but slider
      * arrows should inherit these dimensions and interaction states.
      */
     --slider-nav-size: 3rem;
     --slider-nav-gap: 0.625rem;
     --slider-nav-icon-size: 1.125rem;
     --slider-nav-border-width: 1px;
     --slider-nav-border-color: var(--color-border);
     --slider-nav-color: var(--color-text);
     --slider-nav-hover-border-color: var(--color-heading);
     --slider-nav-hover-color: var(--color-heading);
     --slider-nav-disabled-opacity: 0.35;
     --slider-nav-transition-duration: 180ms;
   
     /* Layout */
     --container-inline-padding: 2rem;
     
     
   
     /*
      * The original framework used 1rem padding on each adjoining column,
      * creating a visual 2rem gutter. A 2rem column gap preserves that spacing.
      */
     --grid-columns: 12;
     --grid-column-gap: 10px;
     --grid-row-gap: 10px;
   }
   
   
   
  @media (max-width: 767px) { 
   
   :root {
     --grid-column-gap: 20px;
      --grid-row-gap: 20px;
    }
    
  }
     
   
   


/* ==========================================================================
   MODERN BROWSER RESET
   ========================================================================== */

html {
  box-sizing: border-box;
  font-size: var(--font-size-root);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

:where(
  html,
  body,
  div,
  span,
  applet,
  object,
  iframe,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote,
  pre,
  a,
  abbr,
  acronym,
  address,
  big,
  cite,
  code,
  del,
  dfn,
  em,
  ins,
  kbd,
  q,
  s,
  samp,
  small,
  strike,
  strong,
  sub,
  sup,
  tt,
  var,
  dl,
  dt,
  dd,
  ol,
  ul,
  li,
  fieldset,
  form,
  label,
  legend,
  table,
  caption,
  tbody,
  tfoot,
  thead,
  tr,
  th,
  td,
  figure,
  figcaption
) {
  margin: 0;
  padding: 0;
  border: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section {
  display: block;
}

/* Preserve natural scrolling: no global overflow, height, touch-action, or
   scroll-behaviour rules are applied to html or body. */

img,
picture,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

img {
  border-style: none;
}

iframe {
  display: block;
  max-width: 100%;
  border: 0;
}

svg {
  max-width: 100%;
}

button,
input,
optgroup,
select,
textarea {
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

button,
select {
  text-transform: none;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
}

button:not(:disabled),
input[type="button"]:not(:disabled),
input[type="reset"]:not(:disabled),
input[type="submit"]:not(:disabled),
summary {
  cursor: pointer;
}

textarea {
  resize: vertical;
}

fieldset {
  min-width: 0;
}

legend {
  max-width: 100%;
  white-space: normal;
}

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

caption,
th,
td {
  font-weight: inherit;
  text-align: start;
  vertical-align: top;
}

ol,
ul {
  list-style-position: outside;
}

blockquote,
q {
  quotes: none;
}

blockquote::before,
blockquote::after,
q::before,
q::after {
  content: "";
}

sub,
sup {
  position: relative;
  font-size: 0.75em;
  line-height: 0;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

pre,
code,
kbd,
samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
}

pre {
  overflow: auto;
  white-space: pre;
}

[hidden] {
  display: none !important;
}


:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  outline-offset: 0;
  box-shadow: none;
}

::selection {
  color: var(--color-background);
  background: var(--color-heading);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


.padding {
  padding-top:30px;
  padding-bottom:30px;
}

.padding-top {
  padding-top:30px;
}

.padding-bottom {
  padding-bottom:30px;
}


/* ==========================================================================
 Remove native browser controls from wine search fields
 ========================================================================== */
.discover-wines-search input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}

.discover-wines-search input[type="search"]::-webkit-search-cancel-button,
.discover-wines-search input[type="search"]::-webkit-search-decoration,
.discover-wines-search input[type="search"]::-webkit-search-results-button,
.discover-wines-search input[type="search"]::-webkit-search-results-decoration {
  display: none;
  -webkit-appearance: none;
  appearance: none;
}



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

body {
  color: var(--color-text);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  font-style: normal;
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  background: var(--color-background);
  font-optical-sizing: auto;
}


/* ==========================================================================
   HEADINGS
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  margin:0;
  margin-block-start: 3rem;
  margin-block-end: 1.5rem;
  color: var(--color-heading);
  font-family: var(--font-family-heading);
  font-style: normal;
  font-weight: var(--font-weight-regular);
  font-optical-sizing: auto;

  /*
   * These match the Fraunces settings shown in the Figma style guide.
   */
  font-variation-settings:
    "SOFT" 0,
    "WONK" 1;
}

/* No top margin when a heading is the first item in the content area. */
:where(h1, h2, h3, h4, h5, h6):first-child {
  margin-block-start: 0;
}

h1 {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  font-weight: var(--font-weight-regular);
}

h2 {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  font-weight: var(--font-weight-light);
}

h3 {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  font-weight: var(--font-weight-light);
}

h4,
h6 {
  color: var(--color-heading);
  font-family: var(--font-family-body);
  font-style: normal;
  font-weight: var(--font-weight-semibold);
}

h4 {
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  font-weight: var(--font-weight-medium);
}

h5 {
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
  font-weight: var(--font-weight-regular);
}

h6 {
  font-size: var(--font-size-h6);
  line-height: var(--line-height-h6);
  font-weight: var(--font-weight-semibold);
}


/* ==========================================================================
   PARAGRAPHS AND INLINE TEXT
   ========================================================================== */

h1 + p,
   h2 + p,
   h3 + p,
   h4 + p,
   h5 + p,
   h6 + p {
     margin-block-start: 0;
   }

p {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
}

p + p {
  margin-block-start: 1rem;
}

p,
li,
dd,
dt,
th,
td,
label,
input,
select,
textarea,
button {
  font-family: var(--font-family-body);
}

small {
  font-size: var(--font-size-small);
  line-height: var(--line-height-body);
}

strong,
b {
  font-weight: var(--font-weight-bold);
}

em,
i {
  font-style: italic;
}

u {
  text-decoration-line: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.12em;
  text-decoration-skip-ink: auto;
}


/* ==========================================================================
   LINKS
   ========================================================================== */

a {
  color: var(--color-heading);
  text-decoration-line: underline;
  text-underline-offset: 0.12em;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: from-font;
  
}

a:hover {
  color: var(--color-muted);
}




/* ==========================================================================
   BLOCKQUOTES
   ========================================================================== */

blockquote {
  margin:0;
  margin-block-start: 1.5rem;
  margin-block-end: 1.5rem;  
  color: var(--color-heading);
  font-family: var(--font-family-heading);
  font-size: 2rem;
  font-style: normal;
  font-weight: var(--font-weight-regular);
  line-height: 1.125;
  font-optical-sizing: auto;
  quotes: none;

  font-variation-settings:
    "SOFT" 0,
    "WONK" 1;
}

blockquote::before,
blockquote::after {
  content: none;
}

blockquote p {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

blockquote p + p {
  margin-block-start: 1rem;
}

blockquote cite,
blockquote small {
  display: block;
  margin-block-start: 1rem;
  color: var(--color-muted);
  font-family: var(--font-family-body);
  font-size: var(--font-size-small);
  font-style: normal;
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
}


/* ==========================================================================
   LISTS
   ========================================================================== */

ul, ol {
  margin: 0;
  padding-inline-start: 1.25rem;
  margin-block-start: 1rem;
}

ul ul, ul ol, ol ul, ol ol {
  margin-block-start: 0.75rem;
  margin-block-end: 0.75rem;
}

li {
  padding-inline-start: 0.25rem;
  color: var(--color-text);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-list);
}

li + li {
  margin-block-start: 0.5rem;
}


/* ==========================================================================
   UNORDERED LISTS
   ========================================================================== */

ul {
  list-style: none;
}

ul > li {
  position: relative;
}

/*
 * Parent unordered-list marker:
 * 8px filled circle.
 */
ul > li::before {
  content: "";
  position: absolute;
  inset-inline-start: -1rem;
  top: 0.375rem;

  width: 0.5rem;
  height: 0.5rem;

  border: 0;
  border-radius: 50%;
  background: var(--color-text);
}

/*
 * Nested unordered-list marker:
 * 8px outlined circle.
 */
ul ul > li::before {
  border: 1px solid var(--color-text);
  background: transparent;
}


/* ==========================================================================
   ORDERED LIST MARKERS
   ========================================================================== */

ol {
  list-style: none;
  counter-reset: ordered-list;
}

ol > li {
  position: relative;
  counter-increment: ordered-list;
}

/* 1. 2. 3. */
ol > li::before {
  content: counter(ordered-list) ".";

  position: absolute;
  inset-inline-start: -1.5rem;
  top: 0.25rem;

  width: 1.25rem;

  color: var(--color-text);
  font-family: var(--font-family-body);
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  line-height: 1;
  text-align: end;
}


/* ==========================================================================
   NESTED ORDERED LISTS
   ========================================================================== */

ol ol {
  list-style: none;
  counter-reset: nested-ordered-list;
}

ol ol > li {
  position: relative;
  counter-increment: nested-ordered-list;
}

/* a. b. c. */
ol ol > li::before {
  content: counter(nested-ordered-list, lower-alpha) ".";
}


/* ==========================================================================
   WORDPRESS UL NESTED INSIDE AN OL
   Display these as a. b. c.
   ========================================================================== */

ol > li > ul {
  list-style: none;
  counter-reset: nested-alpha;
}

ol > li > ul > li {
  position: relative;
  counter-increment: nested-alpha;
}

ol > li > ul > li::before {
  content: counter(nested-alpha, lower-alpha) ".";

  position: absolute;
  inset-inline-start: -1.5rem;
  top: 0.25rem;

  width: 1.25rem;

  border: 0;
  border-radius: 0;
  background: transparent;

  color: var(--color-text);
  font-family: var(--font-family-body);
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  line-height: 1;
  text-align: end;
}

/* ==========================================================================
   ADDRESS
   ========================================================================== */

address {
  margin: 0 0 1.5rem;
  color: var(--color-text);
  font-style: italic;
  line-height: var(--line-height-body);
}


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

button,
.button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  min-height: var(--button-height);
  padding: 0 var(--button-padding-inline);

  border: var(--button-border-width) solid var(--color-border);
  border-radius: var(--button-border-radius);

  color: var(--color-text);
  background: transparent;

  font-family: var(--font-family-body);
  font-size: 1rem;
  font-style: normal;
  font-weight: var(--font-weight-semibold);
  line-height: 1.5;
  text-align: center;
  text-decoration: none;

  cursor: pointer;

  transition:
    color 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease;
}

button:hover,
.button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
  border-color: var(--color-heading);
  color: var(--color-heading);
  background: transparent;
}

button:focus-visible,
.button:focus-visible,
input[type="button"]:focus-visible,
input[type="reset"]:focus-visible,
input[type="submit"]:focus-visible {
 /* outline: 2px solid var(--color-focus);
  outline-offset: 3px;*/
}



/* ==========================================================================
   SHARED SLIDER NAVIGATION
   ========================================================================== */

/*
 * Slider implementations retain their own tracks, card widths, breakpoints,
 * movement increments and status calculations. These classes standardise the
 * navigation controls and accessibility status used by every carousel.
 */
.vw-slider-nav {
  display: flex;
  align-items: center;
  gap: var(--slider-nav-gap);
}

.vw-slider-arrow {
  display: inline-flex;
  flex: 0 0 var(--slider-nav-size);
  align-items: center;
  justify-content: center;
  width: var(--slider-nav-size);
  height: var(--slider-nav-size);
  min-height: 0;
  padding: 0;
  border: var(--slider-nav-border-width) solid var(--slider-nav-border-color);
  border-radius: 50%;
  color: var(--slider-nav-color);
  background: transparent;
  font-size: var(--slider-nav-icon-size);
  line-height: 1;
  transition:
    opacity var(--slider-nav-transition-duration) ease,
    color var(--slider-nav-transition-duration) ease,
    border-color var(--slider-nav-transition-duration) ease,
    background-color var(--slider-nav-transition-duration) ease;
}

.vw-slider-arrow:hover,
.vw-slider-arrow:focus-visible {
  color: var(--slider-nav-hover-color);
  border-color: var(--slider-nav-hover-border-color);
  background: transparent;
}

.vw-slider-arrow:disabled {
  opacity: var(--slider-nav-disabled-opacity);
  cursor: default;
}

.vw-slider-arrow > :where(i, svg) {
  display: block;
  flex: none;
  width: 1em;
  height: 1em;
  line-height: 1;
}

.vw-slider-status {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ==========================================================================
   SECONDARY BUTTON
   ========================================================================== */

.button-secondary {
  min-height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;

  color: var(--color-heading);
  background: transparent;

  font-family: var(--font-family-heading);
  font-size: 1.25rem;
  font-weight: var(--font-weight-regular);
  line-height: 1.2;

  text-decoration-line: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.12em;
  text-decoration-skip-ink: auto;

  font-optical-sizing: auto;

  font-variation-settings:
    "SOFT" 0,
    "WONK" 1;

  transition:
    color 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease;
}

.button-secondary:hover {
  color: var(--color-muted);
  border-color: transparent;
}



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


@media only screen and (max-width: 47.999em) {
   :root {
     --font-size-h1: 2.25rem; /* 36px */
     --font-size-h2: 2.25rem; /* 36px */
     --font-size-h3: 1.5rem;  /* 24px */
     --font-size-h4: 1.25rem; /* 20px */
     --font-size-h5: 1.25rem; /* 20px */
     --font-size-h6: 1rem;    /* 16px */
   }
 }


@media only screen and (max-width: 47.999em) {
   :root {
     --line-height-h1: 1.111111; /* 40px */
     --line-height-h2: 1.111111; /* 40px */
     --line-height-h3: 1.25;     /* 30px */
     --line-height-h4: 1.2;      /* 24px */
     --line-height-h5: 1.2;      /* 24px */
     --line-height-h6: normal;      /* 24px */
   }
 }

@media (max-width: 767px) {
  
  h1, h2, h3, h4, h5, h6 {
  margin:0;
  margin-block-start: 30px;
  margin-block-end: 30px;
  }
    
    :root {
  /* Layout */
  --container-inline-padding: 1.375rem;
  
  
  
  }
 
 }
 



/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  button,
  .button,
  .vw-slider-arrow,
  input[type="button"],
  input[type="reset"],
  input[type="submit"] {
    transition: none;
  }
}


/* ==========================================================================
   FLEXBOX GRID FRAMEWORK
   ========================================================================== */

.container,
.container-fluid,
.container-full {
  width: 100%;
  margin-inline: auto;
}

.container-fluid {
  padding-inline: var(--container-inline-padding);
}

.container-full {
  padding-inline: 0;
}

.container {
  max-width: 1680px;
  padding-left:var(--container-inline-padding);
  padding-right:var(--container-inline-padding);
}

.row {
  display: flex;
  flex: 0 1 auto;
  flex-flow: row wrap;
  gap: var(--grid-row-gap) var(--grid-column-gap);
  min-width: 0;
}

.row.reverse {
  flex-direction: row-reverse;
}

.col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.col.reverse {
  flex-direction: column-reverse;
}

/* Shared column safety. Widths are assigned at their active breakpoint. */
.col-xs,
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-sm,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-md,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-lg,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12 {
  min-width: 0;
  flex-shrink: 0;
}

/* Compatibility with the existing .full modifier. Columns no longer carry
   horizontal gutter padding, so this intentionally remains a harmless no-op. */
.col-xs.full,
.col-xs-1.full,
.col-xs-2.full,
.col-xs-3.full,
.col-xs-4.full,
.col-xs-5.full,
.col-xs-6.full,
.col-xs-7.full,
.col-xs-8.full,
.col-xs-9.full,
.col-xs-10.full,
.col-xs-11.full,
.col-xs-12.full,
.col-sm.full,
.col-sm-1.full,
.col-sm-2.full,
.col-sm-3.full,
.col-sm-4.full,
.col-sm-5.full,
.col-sm-6.full,
.col-sm-7.full,
.col-sm-8.full,
.col-sm-9.full,
.col-sm-10.full,
.col-sm-11.full,
.col-sm-12.full,
.col-md.full,
.col-md-1.full,
.col-md-2.full,
.col-md-3.full,
.col-md-4.full,
.col-md-5.full,
.col-md-6.full,
.col-md-7.full,
.col-md-8.full,
.col-md-9.full,
.col-md-10.full,
.col-md-11.full,
.col-md-12.full,
.col-lg.full,
.col-lg-1.full,
.col-lg-2.full,
.col-lg-3.full,
.col-lg-4.full,
.col-lg-5.full,
.col-lg-6.full,
.col-lg-7.full,
.col-lg-8.full,
.col-lg-9.full,
.col-lg-10.full,
.col-lg-11.full,
.col-lg-12.full {
  padding-inline: 0;
}

/*
 * Width formula for an N-column span:
 * ((available width + one gap) / 12 * N) - one gap
 *
 * This subtracts the gaps occupied by the remaining grid tracks, so combinations
 * such as 4 + 4 + 4 or 3 + 9 still total exactly 100% including their gaps.
 */

.col-xs {
  flex: 1 1 0;
  width: auto;
  max-width: 100%;
}

.col-xs-1 {
  --column-span: 1;
}

.col-xs-2 {
  --column-span: 2;
}

.col-xs-3 {
  --column-span: 3;
}

.col-xs-4 {
  --column-span: 4;
}

.col-xs-5 {
  --column-span: 5;
}

.col-xs-6 {
  --column-span: 6;
}

.col-xs-7 {
  --column-span: 7;
}

.col-xs-8 {
  --column-span: 8;
}

.col-xs-9 {
  --column-span: 9;
}

.col-xs-10 {
  --column-span: 10;
}

.col-xs-11 {
  --column-span: 11;
}

.col-xs-12 {
  --column-span: 12;
}

.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12 {
  --column-width: calc(
    (((100% + var(--grid-column-gap)) / var(--grid-columns)) * var(--column-span))
    - var(--grid-column-gap)
  );
  flex: 0 0 var(--column-width);
  width: var(--column-width);
  max-width: var(--column-width);
}

.col-xs-offset-1 {
  --offset-span: 1;
}

.col-xs-offset-2 {
  --offset-span: 2;
}

.col-xs-offset-3 {
  --offset-span: 3;
}

.col-xs-offset-4 {
  --offset-span: 4;
}

.col-xs-offset-5 {
  --offset-span: 5;
}

.col-xs-offset-6 {
  --offset-span: 6;
}

.col-xs-offset-7 {
  --offset-span: 7;
}

.col-xs-offset-8 {
  --offset-span: 8;
}

.col-xs-offset-9 {
  --offset-span: 9;
}

.col-xs-offset-10 {
  --offset-span: 10;
}

.col-xs-offset-11 {
  --offset-span: 11;
}

.col-xs-offset-1,
.col-xs-offset-2,
.col-xs-offset-3,
.col-xs-offset-4,
.col-xs-offset-5,
.col-xs-offset-6,
.col-xs-offset-7,
.col-xs-offset-8,
.col-xs-offset-9,
.col-xs-offset-10,
.col-xs-offset-11 {
  margin-inline-start: calc(
    ((100% + var(--grid-column-gap)) / var(--grid-columns)) * var(--offset-span)
  );
}

.start-xs {
  justify-content: flex-start;
    text-align: start;
}

.center-xs {
  justify-content: center;
    text-align: center;
}

.end-xs {
  justify-content: flex-end;
    text-align: end;
}

.top-xs {
  align-items: flex-start;
}

.middle-xs {
  align-items: center;
}

.bottom-xs {
  align-items: flex-end;
}

.around-xs {
  justify-content: space-around;
}

.between-xs {
  justify-content: space-between;
}

.first-xs {
  order: -1;
}

.last-xs {
  order: 1;
}


/* Small: 48em / 768px at the default browser font size. */
@media only screen and (min-width: 48em) {
  

  
  .col-sm {
    flex: 1 1 0;
    width: auto;
    max-width: 100%;
  }

  .col-sm-1 {
    --column-span: 1;
  }

  .col-sm-2 {
    --column-span: 2;
  }

  .col-sm-3 {
    --column-span: 3;
  }

  .col-sm-4 {
    --column-span: 4;
  }

  .col-sm-5 {
    --column-span: 5;
  }

  .col-sm-6 {
    --column-span: 6;
  }

  .col-sm-7 {
    --column-span: 7;
  }

  .col-sm-8 {
    --column-span: 8;
  }

  .col-sm-9 {
    --column-span: 9;
  }

  .col-sm-10 {
    --column-span: 10;
  }

  .col-sm-11 {
    --column-span: 11;
  }

  .col-sm-12 {
    --column-span: 12;
  }

  .col-sm-1,
  .col-sm-2,
  .col-sm-3,
  .col-sm-4,
  .col-sm-5,
  .col-sm-6,
  .col-sm-7,
  .col-sm-8,
  .col-sm-9,
  .col-sm-10,
  .col-sm-11,
  .col-sm-12 {
    --column-width: calc(
      (((100% + var(--grid-column-gap)) / var(--grid-columns)) * var(--column-span))
      - var(--grid-column-gap)
    );
    flex: 0 0 var(--column-width);
    width: var(--column-width);
    max-width: var(--column-width);
  }

  .col-sm-offset-1 {
    --offset-span: 1;
  }

  .col-sm-offset-2 {
    --offset-span: 2;
  }

  .col-sm-offset-3 {
    --offset-span: 3;
  }

  .col-sm-offset-4 {
    --offset-span: 4;
  }

  .col-sm-offset-5 {
    --offset-span: 5;
  }

  .col-sm-offset-6 {
    --offset-span: 6;
  }

  .col-sm-offset-7 {
    --offset-span: 7;
  }

  .col-sm-offset-8 {
    --offset-span: 8;
  }

  .col-sm-offset-9 {
    --offset-span: 9;
  }

  .col-sm-offset-10 {
    --offset-span: 10;
  }

  .col-sm-offset-11 {
    --offset-span: 11;
  }

  .col-sm-offset-1,
  .col-sm-offset-2,
  .col-sm-offset-3,
  .col-sm-offset-4,
  .col-sm-offset-5,
  .col-sm-offset-6,
  .col-sm-offset-7,
  .col-sm-offset-8,
  .col-sm-offset-9,
  .col-sm-offset-10,
  .col-sm-offset-11 {
    margin-inline-start: calc(
      ((100% + var(--grid-column-gap)) / var(--grid-columns)) * var(--offset-span)
    );
  }

  .start-sm {
    justify-content: flex-start;
      text-align: start;
  }

  .center-sm {
    justify-content: center;
      text-align: center;
  }

  .end-sm {
    justify-content: flex-end;
      text-align: end;
  }

  .top-sm {
    align-items: flex-start;
  }

  .middle-sm {
    align-items: center;
  }

  .bottom-sm {
    align-items: flex-end;
  }

  .around-sm {
    justify-content: space-around;
  }

  .between-sm {
    justify-content: space-between;
  }

  .first-sm {
    order: -1;
  }

  .last-sm {
    order: 1;
  }
}


/* Medium: 62em / 992px at the default browser font size. */
@media only screen and (min-width: 62em) {
  .col-md {
    flex: 1 1 0;
    width: auto;
    max-width: 100%;
  }

  .col-md-1 {
    --column-span: 1;
  }

  .col-md-2 {
    --column-span: 2;
  }

  .col-md-3 {
    --column-span: 3;
  }

  .col-md-4 {
    --column-span: 4;
  }

  .col-md-5 {
    --column-span: 5;
  }

  .col-md-6 {
    --column-span: 6;
  }

  .col-md-7 {
    --column-span: 7;
  }

  .col-md-8 {
    --column-span: 8;
  }

  .col-md-9 {
    --column-span: 9;
  }

  .col-md-10 {
    --column-span: 10;
  }

  .col-md-11 {
    --column-span: 11;
  }

  .col-md-12 {
    --column-span: 12;
  }

  .col-md-1,
  .col-md-2,
  .col-md-3,
  .col-md-4,
  .col-md-5,
  .col-md-6,
  .col-md-7,
  .col-md-8,
  .col-md-9,
  .col-md-10,
  .col-md-11,
  .col-md-12 {
    --column-width: calc(
      (((100% + var(--grid-column-gap)) / var(--grid-columns)) * var(--column-span))
      - var(--grid-column-gap)
    );
    flex: 0 0 var(--column-width);
    width: var(--column-width);
    max-width: var(--column-width);
  }

  .col-md-offset-1 {
    --offset-span: 1;
  }

  .col-md-offset-2 {
    --offset-span: 2;
  }

  .col-md-offset-3 {
    --offset-span: 3;
  }

  .col-md-offset-4 {
    --offset-span: 4;
  }

  .col-md-offset-5 {
    --offset-span: 5;
  }

  .col-md-offset-6 {
    --offset-span: 6;
  }

  .col-md-offset-7 {
    --offset-span: 7;
  }

  .col-md-offset-8 {
    --offset-span: 8;
  }

  .col-md-offset-9 {
    --offset-span: 9;
  }

  .col-md-offset-10 {
    --offset-span: 10;
  }

  .col-md-offset-11 {
    --offset-span: 11;
  }

  .col-md-offset-1,
  .col-md-offset-2,
  .col-md-offset-3,
  .col-md-offset-4,
  .col-md-offset-5,
  .col-md-offset-6,
  .col-md-offset-7,
  .col-md-offset-8,
  .col-md-offset-9,
  .col-md-offset-10,
  .col-md-offset-11 {
    margin-inline-start: calc(
      ((100% + var(--grid-column-gap)) / var(--grid-columns)) * var(--offset-span)
    );
  }

  .start-md {
    justify-content: flex-start;
      text-align: start;
  }

  .center-md {
    justify-content: center;
      text-align: center;
  }

  .end-md {
    justify-content: flex-end;
      text-align: end;
  }

  .top-md {
    align-items: flex-start;
  }

  .middle-md {
    align-items: center;
  }

  .bottom-md {
    align-items: flex-end;
  }

  .around-md {
    justify-content: space-around;
  }

  .between-md {
    justify-content: space-between;
  }

  .first-md {
    order: -1;
  }

  .last-md {
    order: 1;
  }
}


/* Large: 75em / 1200px at the default browser font size. */
@media only screen and (min-width: 75em) {
  .col-lg {
    flex: 1 1 0;
    width: auto;
    max-width: 100%;
  }

  .col-lg-1 {
    --column-span: 1;
  }

  .col-lg-2 {
    --column-span: 2;
  }

  .col-lg-3 {
    --column-span: 3;
  }

  .col-lg-4 {
    --column-span: 4;
  }

  .col-lg-5 {
    --column-span: 5;
  }

  .col-lg-6 {
    --column-span: 6;
  }

  .col-lg-7 {
    --column-span: 7;
  }

  .col-lg-8 {
    --column-span: 8;
  }

  .col-lg-9 {
    --column-span: 9;
  }

  .col-lg-10 {
    --column-span: 10;
  }

  .col-lg-11 {
    --column-span: 11;
  }

  .col-lg-12 {
    --column-span: 12;
  }

  .col-lg-1,
  .col-lg-2,
  .col-lg-3,
  .col-lg-4,
  .col-lg-5,
  .col-lg-6,
  .col-lg-7,
  .col-lg-8,
  .col-lg-9,
  .col-lg-10,
  .col-lg-11,
  .col-lg-12 {
    --column-width: calc(
      (((100% + var(--grid-column-gap)) / var(--grid-columns)) * var(--column-span))
      - var(--grid-column-gap)
    );
    flex: 0 0 var(--column-width);
    width: var(--column-width);
    max-width: var(--column-width);
  }

  .col-lg-offset-1 {
    --offset-span: 1;
  }

  .col-lg-offset-2 {
    --offset-span: 2;
  }

  .col-lg-offset-3 {
    --offset-span: 3;
  }

  .col-lg-offset-4 {
    --offset-span: 4;
  }

  .col-lg-offset-5 {
    --offset-span: 5;
  }

  .col-lg-offset-6 {
    --offset-span: 6;
  }

  .col-lg-offset-7 {
    --offset-span: 7;
  }

  .col-lg-offset-8 {
    --offset-span: 8;
  }

  .col-lg-offset-9 {
    --offset-span: 9;
  }

  .col-lg-offset-10 {
    --offset-span: 10;
  }

  .col-lg-offset-11 {
    --offset-span: 11;
  }

  .col-lg-offset-1,
  .col-lg-offset-2,
  .col-lg-offset-3,
  .col-lg-offset-4,
  .col-lg-offset-5,
  .col-lg-offset-6,
  .col-lg-offset-7,
  .col-lg-offset-8,
  .col-lg-offset-9,
  .col-lg-offset-10,
  .col-lg-offset-11 {
    margin-inline-start: calc(
      ((100% + var(--grid-column-gap)) / var(--grid-columns)) * var(--offset-span)
    );
  }

  .start-lg {
    justify-content: flex-start;
      text-align: start;
  }

  .center-lg {
    justify-content: center;
      text-align: center;
  }

  .end-lg {
    justify-content: flex-end;
      text-align: end;
  }

  .top-lg {
    align-items: flex-start;
  }

  .middle-lg {
    align-items: center;
  }

  .bottom-lg {
    align-items: flex-end;
  }

  .around-lg {
    justify-content: space-around;
  }

  .between-lg {
    justify-content: space-between;
  }

  .first-lg {
    order: -1;
  }

  .last-lg {
    order: 1;
  }
}