@charset "UTF-8";
/* =========================================
   Responsive width utilities (copy & paste)
   20px step (20–500px), max-width media queries
   Breakpoints: sp / tab / pc / xs / sm / md / lg / xl
   NOTE: Use class like: w-300 tab:w-200 sp:w-100
   ========================================= */

/* Breakpoints as CSS variables (max-width) */
:root{
  --bp-sp:  575.98px;  /* smartphone */
  --bp-tab: 991.98px;  /* tablet */
  --bp-xs:  479.98px;
  --bp-sm:  639.98px;
  --bp-md:  767.98px;
  --bp-lg:  1199.98px;
  --bp-xl: 1399.98px;
}

/* Fit inner img for WP image/featured-image blocks */
/* .wp-block-image img,
.wp-block-post-featured-image img{
  display:block;
  width:100%;
  height:auto;
} */

/* Optional: center helper */
.u-center{ margin-inline:auto !important; }

/* ========== Base widths (20–500px) ========== */
.w-20px  { max-width:20px !important; }
.w-40px  { max-width:40px !important; }
.w-60px  { max-width:60px !important; }
.w-80px  { max-width:80px !important; }
.w-100px { max-width:100px !important; }
.w-120px { max-width:120px !important; }
.w-140px { max-width:140px !important; }
.w-160px { max-width:160px !important; }
.w-180px { max-width:180px !important; }
.w-200px { max-width:200px !important; }
.w-220px { max-width:220px !important; }
.w-240px { max-width:240px !important; }
.w-260px { max-width:260px !important; }
.w-280px { max-width:280px !important; }
.w-300px { max-width:300px !important; }
.w-320px { max-width:320px !important; }
.w-340px { max-width:340px !important; }
.w-360px { max-width:360px !important; }
.w-380px { max-width:380px !important; }
.w-400px { max-width:400px !important; }
.w-420px { max-width:420px !important; }
.w-440px { max-width:440px !important; }
.w-460px { max-width:460px !important; }
.w-480px { max-width:480px !important; }
.w-500px { max-width:500px !important; }

/* ========== sp and below (≤ 575.98px) ========== */
@media (max-width:575.98px){
  .sp\:w-20px  { max-width:20px !important; }
  .sp\:w-40px  { max-width:40px !important; }
  .sp\:w-60px  { max-width:60px !important; }
  .sp\:w-80px  { max-width:80px !important; }
  .sp\:w-100px { max-width:100px !important; }
  .sp\:w-120px { max-width:120px !important; }
  .sp\:w-140px { max-width:140px !important; }
  .sp\:w-160px { max-width:160px !important; }
  .sp\:w-180px { max-width:180px !important; }
  .sp\:w-200px { max-width:200px !important; }
  .sp\:w-220px { max-width:220px !important; }
  .sp\:w-240px { max-width:240px !important; }
  .sp\:w-260px { max-width:260px !important; }
  .sp\:w-280px { max-width:280px !important; }
  .sp\:w-300px { max-width:300px !important; }
  .sp\:w-320px { max-width:320px !important; }
  .sp\:w-340px { max-width:340px !important; }
  .sp\:w-360px { max-width:360px !important; }
  .sp\:w-380px { max-width:380px !important; }
  .sp\:w-400px { max-width:400px !important; }
  .sp\:w-420px { max-width:420px !important; }
  .sp\:w-440px { max-width:440px !important; }
  .sp\:w-460px { max-width:460px !important; }
  .sp\:w-480px { max-width:480px !important; }
  .sp\:w-500px { max-width:500px !important; }
}

/* ========== tab and below (≤ 767.98px) ========== */
@media (max-width:991.98px){
  .tab\:w-20px  { max-width:20px !important; }
  .tab\:w-40px  { max-width:40px !important; }
  .tab\:w-60px  { max-width:60px !important; }
  .tab\:w-80px  { max-width:80px !important; }
  .tab\:w-100px { max-width:100px !important; }
  .tab\:w-120px { max-width:120px !important; }
  .tab\:w-140px { max-width:140px !important; }
  .tab\:w-160px { max-width:160px !important; }
  .tab\:w-180px { max-width:180px !important; }
  .tab\:w-200px { max-width:200px !important; }
  .tab\:w-220px { max-width:220px !important; }
  .tab\:w-240px { max-width:240px !important; }
  .tab\:w-260px { max-width:260px !important; }
  .tab\:w-280px { max-width:280px !important; }
  .tab\:w-300px { max-width:300px !important; }
  .tab\:w-320px { max-width:320px !important; }
  .tab\:w-340px { max-width:340px !important; }
  .tab\:w-360px { max-width:360px !important; }
  .tab\:w-380px { max-width:380px !important; }
  .tab\:w-400px { max-width:400px !important; }
  .tab\:w-420px { max-width:420px !important; }
  .tab\:w-440px { max-width:440px !important; }
  .tab\:w-460px { max-width:460px !important; }
  .tab\:w-480px { max-width:480px !important; }
  .tab\:w-500px { max-width:500px !important; }
}

/* ========== xs and below (≤ 479.98px) ========== */
@media (max-width:479.98px){
  .xs\:w-20px  { max-width:20px !important; }
  .xs\:w-40px  { max-width:40px !important; }
  .xs\:w-60px  { max-width:60px !important; }
  .xs\:w-80px  { max-width:80px !important; }
  .xs\:w-100px { max-width:100px !important; }
  .xs\:w-120px { max-width:120px !important; }
  .xs\:w-140px { max-width:140px !important; }
  .xs\:w-160px { max-width:160px !important; }
  .xs\:w-180px { max-width:180px !important; }
  .xs\:w-200px { max-width:200px !important; }
  .xs\:w-220px { max-width:220px !important; }
  .xs\:w-240px { max-width:240px !important; }
  .xs\:w-260px { max-width:260px !important; }
  .xs\:w-280px { max-width:280px !important; }
  .xs\:w-300px { max-width:300px !important; }
  .xs\:w-320px { max-width:320px !important; }
  .xs\:w-340px { max-width:340px !important; }
  .xs\:w-360px { max-width:360px !important; }
  .xs\:w-380px { max-width:380px !important; }
  .xs\:w-400px { max-width:400px !important; }
  .xs\:w-420px { max-width:420px !important; }
  .xs\:w-440px { max-width:440px !important; }
  .xs\:w-460px { max-width:460px !important; }
  .xs\:w-480px { max-width:480px !important; }
  .xs\:w-500px { max-width:500px !important; }
}

/* ========== sm and below (≤ 639.98px) ========== */
@media (max-width:639.98px){
  .sm\:w-20px  { max-width:20px !important; }
  .sm\:w-40px  { max-width:40px !important; }
  .sm\:w-60px  { max-width:60px !important; }
  .sm\:w-80px  { max-width:80px !important; }
  .sm\:w-100px { max-width:100px !important; }
  .sm\:w-120px { max-width:120px !important; }
  .sm\:w-140px { max-width:140px !important; }
  .sm\:w-160px { max-width:160px !important; }
  .sm\:w-180px { max-width:180px !important; }
  .sm\:w-200px { max-width:200px !important; }
  .sm\:w-220px { max-width:220px !important; }
  .sm\:w-240px { max-width:240px !important; }
  .sm\:w-260px { max-width:260px !important; }
  .sm\:w-280px { max-width:280px !important; }
  .sm\:w-300px { max-width:300px !important; }
  .sm\:w-320px { max-width:320px !important; }
  .sm\:w-340px { max-width:340px !important; }
  .sm\:w-360px { max-width:360px !important; }
  .sm\:w-380px { max-width:380px !important; }
  .sm\:w-400px { max-width:400px !important; }
  .sm\:w-420px { max-width:420px !important; }
  .sm\:w-440px { max-width:440px !important; }
  .sm\:w-460px { max-width:460px !important; }
  .sm\:w-480px { max-width:480px !important; }
  .sm\:w-500px { max-width:500px !important; }
}

/* ========== md and below (≤ 767.98px) ========== */
@media (max-width:767.98px){
  .md\:w-20px  { max-width:20px !important; }
  .md\:w-40px  { max-width:40px !important; }
  .md\:w-60px  { max-width:60px !important; }
  .md\:w-80px  { max-width:80px !important; }
  .md\:w-100px { max-width:100px !important; }
  .md\:w-120px { max-width:120px !important; }
  .md\:w-140px { max-width:140px !important; }
  .md\:w-160px { max-width:160px !important; }
  .md\:w-180px { max-width:180px !important; }
  .md\:w-200px { max-width:200px !important; }
  .md\:w-220px { max-width:220px !important; }
  .md\:w-240px { max-width:240px !important; }
  .md\:w-260px { max-width:260px !important; }
  .md\:w-280px { max-width:280px !important; }
  .md\:w-300px { max-width:300px !important; }
  .md\:w-320px { max-width:320px !important; }
  .md\:w-340px { max-width:340px !important; }
  .md\:w-360px { max-width:360px !important; }
  .md\:w-380px { max-width:380px !important; }
  .md\:w-400px { max-width:400px !important; }
  .md\:w-420px { max-width:420px !important; }
  .md\:w-440px { max-width:440px !important; }
  .md\:w-460px { max-width:460px !important; }
  .md\:w-480px { max-width:480px !important; }
  .md\:w-500px { max-width:500px !important; }
}

/* ========== lg and below (≤ 1199.98px) ========== */
@media (max-width:1199.98px){
  .lg\:w-20px  { max-width:20px !important; }
  .lg\:w-40px  { max-width:40px !important; }
  .lg\:w-60px  { max-width:60px !important; }
  .lg\:w-80px  { max-width:80px !important; }
  .lg\:w-100px { max-width:100px !important; }
  .lg\:w-120px { max-width:120px !important; }
  .lg\:w-140px { max-width:140px !important; }
  .lg\:w-160px { max-width:160px !important; }
  .lg\:w-180px { max-width:180px !important; }
  .lg\:w-200px { max-width:200px !important; }
  .lg\:w-220px { max-width:220px !important; }
  .lg\:w-240px { max-width:240px !important; }
  .lg\:w-260px { max-width:260px !important; }
  .lg\:w-280px { max-width:280px !important; }
  .lg\:w-300px { max-width:300px !important; }
  .lg\:w-320px { max-width:320px !important; }
  .lg\:w-340px { max-width:340px !important; }
  .lg\:w-360px { max-width:360px !important; }
  .lg\:w-380px { max-width:380px !important; }
  .lg\:w-400px { max-width:400px !important; }
  .lg\:w-420px { max-width:420px !important; }
  .lg\:w-440px { max-width:440px !important; }
  .lg\:w-460px { max-width:460px !important; }
  .lg\:w-480px { max-width:480px !important; }
  .lg\:w-500px { max-width:500px !important; }
}

/* ========== xl and below (≤ 1399.98px) ========== */
@media (max-width:1399.98px){
  .xl\:w-20px  { max-width:20px !important; }
  .xl\:w-40px  { max-width:40px !important; }
  .xl\:w-60px  { max-width:60px !important; }
  .xl\:w-80px  { max-width:80px !important; }
  .xl\:w-100px { max-width:100px !important; }
  .xl\:w-120px { max-width:120px !important; }
  .xl\:w-140px { max-width:140px !important; }
  .xl\:w-160px { max-width:160px !important; }
  .xl\:w-180px { max-width:180px !important; }
  .xl\:w-200px { max-width:200px !important; }
  .xl\:w-220px { max-width:220px !important; }
  .xl\:w-240px { max-width:240px !important; }
  .xl\:w-260px { max-width:260px !important; }
  .xl\:w-280px { max-width:280px !important; }
  .xl\:w-300px { max-width:300px !important; }
  .xl\:w-320px { max-width:320px !important; }
  .xl\:w-340px { max-width:340px !important; }
  .xl\:w-360px { max-width:360px !important; }
  .xl\:w-380px { max-width:380px !important; }
  .xl\:w-400px { max-width:400px !important; }
  .xl\:w-420px { max-width:420px !important; }
  .xl\:w-440px { max-width:440px !important; }
  .xl\:w-460px { max-width:460px !important; }
  .xl\:w-480px { max-width:480px !important; }
  .xl\:w-500px { max-width:500px !important; }
}