holygrail2 1.3.9 → 1.3.10

package/dist/style-rtl.css

@@ -358,10 +358,6 @@ button {
   justify-content: center;
 }
 
-.content-sp-between {
-  justify-content: space-between;
-}
-
 .content-sp-around {
   justify-content: space-around;
 }
@@ -434,6 +430,7 @@ button {
 .align-end {
   display: flex;
   align-items: end;
+  justify-content: end;
 }
 
 .align-center {
@@ -601,59 +598,77 @@ button {
   }
 }
 
+.align-start {
+  align-items: start;
+}
+
+.content-sp-between {
+  justify-content: space-between;
+}
+
+@media (min-width: 992px) {
+  .md\:content-sp-between {
+    justify-content: space-between;
+  }
+}
+@media (max-width: 992px) {
+  .mdmax\:content-end {
+    justify-content: flex-end;
+  }
+}
 .container-full {
-  position: relative;
-  padding-inline: 8px;
-  margin-right: auto;
   margin-left: auto;
+  margin-right: auto;
   max-width: 1500px;
+  padding-inline: 8px;
+  position: relative;
 }
 @media (min-width: 768px) {
   .container-full {
+    max-width: 768px;
     padding-inline: 8px;
     width: 90%;
-    max-width: 768px;
   }
 }
 @media (min-width: 992px) {
   .container-full {
-    width: 80%;
     max-width: 992px;
+    width: 80%;
   }
 }
 @media (min-width: 1280px) {
   .container-full {
-    width: 80%;
     max-width: 1280px;
+    width: 80%;
   }
 }
 
 .container-total {
-  position: relative;
-  margin-right: 0;
   margin-left: 0;
-  width: 100%;
+  margin-right: 0;
   max-width: 100%;
+  position: relative;
+  width: 100%;
 }
 @media (min-width: 992px) {
   .container-total {
-    width: 100%;
     max-width: 100%;
+    width: 100%;
   }
 }
 
 .container-bleed {
-  position: relative;
-  padding-inline: 0;
-  margin-right: auto;
   margin-left: auto;
+  margin-right: auto;
+  padding-inline: 0;
+  position: relative;
 }
 
 .container-fluid {
-  position: relative;
-  padding-inline: 8px;
-  margin-right: auto;
   margin-left: auto;
+  margin-right: auto;
+  padding-inline: 8px;
+  position: relative;
 }
 
 .container-body {
@@ -668,8 +683,8 @@ button {
 }
 
 .container-body2 {
-  padding-left: 16px;
   overflow: hidden;
+  padding-left: 16px;
 }
 @media (min-width: 992px) {
   .container-body2 {
@@ -681,55 +696,55 @@ button {
 }
 
 .container {
-  position: relative;
-  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
   max-width: 800px;
   padding-inline: 8px;
-  margin-right: auto;
-  margin-left: auto;
+  position: relative;
+  width: 100%;
 }
 @media (min-width: 768px) {
   .container {
+    max-width: 768px;
     padding-inline: 8px;
     width: 90%;
-    max-width: 768px;
   }
 }
 @media (min-width: 992px) {
   .container {
-    width: 80%;
     max-width: 992px;
+    width: 80%;
   }
 }
 @media (min-width: 1280px) {
   .container {
-    width: 80%;
     max-width: 1280px;
+    width: 80%;
   }
 }
 @media (min-width: 1440px) {
   .container {
-    width: 100%;
     max-width: 1440px;
+    width: 100%;
   }
 }
 
 .container-2 {
-  position: relative;
-  width: 90%;
+  margin-left: auto;
+  margin-right: auto;
   max-width: 700px;
   padding-inline: 8px;
-  margin-right: auto;
-  margin-left: auto;
+  position: relative;
+  width: 90%;
 }
 
 .container-3 {
-  position: relative;
-  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
   max-width: 900px;
   padding-inline: 24px;
-  margin-right: auto;
-  margin-left: auto;
+  position: relative;
+  width: 100%;
 }
 @media (min-width: 768px) {
   .container-3 {
@@ -738,20 +753,20 @@ button {
 }
 
 .container-4 {
-  position: relative;
-  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
   max-width: 360px;
   padding-inline: 16px;
-  margin-right: auto;
-  margin-left: auto;
+  position: relative;
+  width: 100%;
 }
 
 .container-5 {
-  position: relative;
-  width: 100%;
+  margin: 0 auto;
   max-width: 800px;
   padding: 0 8px;
-  margin: 0 auto;
+  position: relative;
+  width: 100%;
 }
 @media (min-width: 1280px) {
   .container-5 {
@@ -761,25 +776,25 @@ button {
 }
 
 .container-6 {
-  position: relative;
-  width: 100%;
-  max-width: 442px;
   margin: 0 auto;
+  max-width: 442px;
   padding: 0 8px;
+  position: relative;
+  width: 100%;
 }
 
 .container-7 {
-  position: relative;
-  width: 100%;
-  max-width: 295px;
   margin: 0 auto;
+  max-width: 295px;
   padding: 0 16px;
+  position: relative;
+  width: 100%;
 }
 @media (min-width: 768px) {
   .container-7 {
     max-width: 460px;
-    padding-right: 8px;
     padding-left: 8px;
+    padding-right: 8px;
   }
 }
 @media (min-width: 992px) {
@@ -794,19 +809,19 @@ button {
 }
 
 .container-8 {
-  position: relative;
-  width: 100%;
-  max-width: 395px;
   margin: 0 auto;
+  max-width: 395px;
   padding: 0 8px;
+  position: relative;
+  width: 100%;
 }
 
 .container-9 {
-  position: relative;
-  width: 100%;
-  max-width: 798px;
   margin: 0 auto;
+  max-width: 798px;
   padding: 0 24px;
+  position: relative;
+  width: 100%;
 }
 @media (min-width: 768px) {
   .container-9 {
@@ -815,16 +830,16 @@ button {
 }
 
 .container-10 {
-  position: relative;
   max-width: 200px;
+  position: relative;
 }
 
 .container-11 {
-  position: relative;
-  width: 100%;
-  max-width: 1080px;
   margin: 0 auto;
+  max-width: 1080px;
   padding: 0 24px;
+  position: relative;
+  width: 100%;
 }
 @media (min-width: 768px) {
   .container-11 {
@@ -833,10 +848,10 @@ button {
 }
 
 .container-12 {
-  position: relative;
-  width: 100%;
   max-width: 1080px;
   padding: 0 24px;
+  position: relative;
+  width: 100%;
 }
 @media (min-width: 768px) {
   .container-12 {
@@ -845,53 +860,53 @@ button {
 }
 
 .container-360 {
-  width: 100%;
   max-width: 360px;
+  width: 100%;
 }
 
 .container-496 {
-  width: 100%;
   max-width: 496px;
+  width: 100%;
 }
 
 .container-512 {
-  width: 100%;
   max-width: 512px;
+  width: 100%;
 }
 
 .container-640 {
-  width: 100%;
   max-width: 640px;
+  width: 100%;
 }
 
 .row {
   display: flex;
   flex-wrap: wrap;
-  margin-right: -8px;
   margin-left: -8px;
+  margin-right: -8px;
 }
 @media (min-width: 768px) {
   .row {
-    margin-right: -8px;
     margin-left: -8px;
+    margin-right: -8px;
   }
 }
 @media (min-width: 992px) {
   .row {
-    margin-right: -8px;
     margin-left: -8px;
+    margin-right: -8px;
   }
 }
 @media (min-width: 1280px) {
   .row {
-    margin-right: -8px;
     margin-left: -8px;
+    margin-right: -8px;
   }
 }
 @media (min-width: 1440px) {
   .row {
-    margin-right: -8px;
     margin-left: -8px;
+    margin-right: -8px;
   }
 }
 
@@ -1195,10 +1210,10 @@ button {
 }
 [class*=col-] {
   box-sizing: border-box;
-  position: relative;
   min-height: 1px;
-  padding-right: 8px;
   padding-left: 8px;
+  padding-right: 8px;
+  position: relative;
 }
 
 .col {
@@ -1377,11 +1392,16 @@ button {
 }
 .list-grid {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
   gap: 16px;
-  width: 100%;
-  max-width: 1200px;
+  grid-template-columns: repeat(4, 1fr);
   margin: 0 auto;
+  max-width: 1200px;
+  width: 100%;
+}
+
+.grid-1 {
+  display: grid;
+  grid-template-columns: 1fr;
 }
 
 .grid-2 {
@@ -1394,10 +1414,19 @@ button {
   grid-template-columns: repeat(3, 1fr);
 }
 
+.grid-4 {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+}
+
 .colgap-16 {
   column-gap: 16px;
 }
 
+.gap-8 {
+  gap: 8px;
+}
+
 .colgap-8 {
   column-gap: 8px;
 }
@@ -1416,12 +1445,12 @@ button {
 }
 
 .grid-8 {
+  align-items: start;
   display: grid;
   grid-template-columns: repeat(8, 1fr);
-  width: 100%;
-  align-items: start;
-  max-width: 1200px;
   margin: 0 auto;
+  max-width: 1200px;
+  width: 100%;
 }
 .grid-8 img {
   border: 1px solid #eaeaea;
@@ -1429,17 +1458,31 @@ button {
 
 @media (min-width: 768px) {
   .grid-2-desktop {
+    align-items: end;
+    column-gap: 16px;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
-    column-gap: 16px;
-    align-items: end;
+  }
+}
+
+@media (min-width: 768px) {
+  .sm\:grid-1 {
+    display: grid;
+    grid-template-columns: 1fr;
   }
 }
 
 @media (min-width: 768px) {
   .sm\:grid-2 {
     display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (min-width: 768px) {
+  .sm\:grid-3 {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
   }
 }
 
@@ -1473,21 +1516,21 @@ button {
 }
 
 .grid-3-6-8 {
+  column-gap: 6px;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  column-gap: 6px;
   max-width: 100%;
 }
 @media (min-width: 992px) {
   .grid-3-6-8 {
-    grid-template-columns: repeat(6, 1fr);
     column-gap: 16px;
+    grid-template-columns: repeat(6, 1fr);
   }
 }
 @media (min-width: 1280px) {
   .grid-3-6-8 {
-    grid-template-columns: repeat(8, 1fr);
     column-gap: 16px;
+    grid-template-columns: repeat(8, 1fr);
   }
 }
 
@@ -6316,6 +6359,11 @@ strong {
   flex-grow: 1;
 }
 
+.flex-grow {
+  flex-grow: 1;
+  overflow-y: auto;
+}
+
 .grow-0 {
   flex-grow: 0;
 }
@@ -6324,6 +6372,10 @@ strong {
   cursor: default;
 }
 
+.no-relative {
+  position: inherit;
+}
+
 .theme-keyboard-accesible *:focus,
 .theme-keyboard-accesible *:focus-visible,
 .theme-keyboard-accesible [class*=checkbox-]:focus + label,
@@ -7071,6 +7123,25 @@ button {
   background-color: transparent;
 }
 
+.btn-tertiary {
+  height: auto;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  line-height: 1;
+  min-width: 24px;
+  padding-inline: 0;
+  font-size: 14px;
+}
+
+.btn-tertiary.active {
+  border-bottom: 0.5px solid #000000;
+}
+
+@media (min-width: 992px) {
+  .btn-tertiary {
+    font-size: 12px;
+  }
+}
 .btn-text {
   background-color: transparent;
   border-color: transparent;