@import "../../app/variables";
.category{
    position: relative;
    .header {
      display: flex;
      align-items: center;
      width: 100%;
      gap: 0.5rem;
      position: relative;
      z-index: 2;
      hr {
        flex: 1 1 auto;
      }
      button {
        background-color: $text-medium;
        width: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid $text-medium;
        border-radius: 50px;
        opacity: 0.4;
        transition: 300ms;
        &:hover{
          opacity: 1;
        }
      }
      .title {
        h4 {
          font-size: 1.125rem;
          font-weight: 800;
          span {
            font-weight: 300;
          }
        }
      }
    }
    .body {
      position: relative;
      z-index: 2;
      .category-item {
        width: 80px;
        margin: 0 auto;
        .category-item-image {
          position: relative;
          width: 100%;
          height: 80px;
          .background {
            
            background-color: $text-muted;
            mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2281%22%20height%3D%2282%22%20viewBox%3D%220%200%2081%2082%22%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url(%23clip0_242_2761)%22%3E%3Cpath%20d%3D%22M68.8061%2036.4726C68.7399%2036.1283%2068.6596%2035.7748%2068.5835%2035.4278C68.4313%2034.7336%2068.3078%2034.2999%2068.1864%2034.0089C68.0551%2033.7151%2067.9472%2033.5593%2067.841%2033.3934C67.7389%2033.2339%2067.6253%2033.0817%2067.494%2032.7879C67.4255%2032.6429%2067.3563%2032.4713%2067.2757%2032.2441C67.1951%2032.0168%2067.0958%2031.7476%2066.9695%2031.4236C65.934%2028.8301%2064.5668%2026.3141%2062.8837%2024.0273C61.2047%2021.7469%2059.2198%2019.6983%2057.0508%2017.9834C52.699%2014.5446%2047.6637%2012.4338%2042.6238%2011.6213C37.5839%2010.8088%2032.4746%2011.2822%2027.8627%2013.1282C25.5587%2014.0544%2023.3892%2015.3173%2021.4617%2016.9202C19.5358%2018.5129%2017.8535%2020.4355%2016.5152%2022.5785C17.9829%2020.5235%2019.5688%2018.9955%2021.2576%2017.6535C22.9546%2016.3242%2024.7619%2015.1672%2026.944%2014.0761C27.0166%2014.2275%2027.1675%2014.5267%2028.2736%2014.0615C29.9651%2013.4464%2031.7746%2012.9266%2033.6139%2012.6308C35.4571%2012.3413%2037.309%2012.2172%2039.0626%2012.282C42.5739%2012.4179%2045.6415%2013.3056%2047.3351%2014.2274C47.6203%2014.3686%2047.9038%2014.52%2048.2176%2014.7059C48.5297%2014.9019%2048.8639%2015.1197%2049.2768%2015.3591C49.6914%2015.5884%2050.1591%2015.9007%2050.7425%2016.2289C51.3234%2016.5406%2051.9918%2016.9763%2052.8054%2017.436C52.2597%2017.1286%2051.7157%2016.8112%2051.1626%2016.5176C50.6004%2016.2479%2050.0456%2015.9644%2049.4842%2015.7211C49.4337%2015.8704%2049.3368%2016.1753%2049.3368%2016.1753C51.5373%2017.2043%2053.9112%2018.707%2055.9968%2020.5832C58.0997%2022.4484%2059.8904%2024.6752%2061.1652%2026.8186C61.1652%2026.8186%2060.9062%2026.9844%2060.7796%2027.0655L61.1104%2027.5823C61.2207%2027.7546%2061.3195%2027.9342%2061.4142%2028.1075L62.0085%2029.1753C62.0427%2029.8371%2061.7127%2029.5625%2061.1028%2028.7746C60.9508%2028.5751%2060.7881%2028.3464%2060.6051%2028.0858C60.422%2027.8252%2060.1996%2027.5538%2059.9764%2027.2559C59.5432%2026.6426%2058.9937%2025.987%2058.4155%2025.2866C57.2148%2023.9054%2055.7213%2022.4597%2054.1572%2021.2841C53.7568%2021.0008%2053.381%2020.6926%2052.9853%2020.4422C52.5897%2020.1917%2052.2038%2019.944%2051.832%2019.7053C51.0626%2019.2893%2050.3596%2018.8758%2049.7096%2018.6082C49.655%2018.7511%2049.5442%2019.047%2049.4879%2019.1999C50.1485%2019.4967%2050.7785%2019.885%2051.4192%2020.2394L51.3969%2020.2806C41.2778%2014.1832%2027.462%2015.6965%2020.7879%2025.8431C19.9768%2027.0731%2019.3188%2028.4028%2018.7976%2029.8069C18.8184%2029.7127%2018.8351%2029.612%2018.8559%2029.5178C18.9623%2029.0628%2019.0605%2028.5952%2019.171%2028.1466C19.3052%2027.7099%2019.4263%2027.2906%2019.5349%2026.9152C19.7874%2026.1688%2020.0172%2025.5899%2020.0796%2025.3071C20.4051%2024.586%2020.2094%2024.4324%2019.6826%2024.6617C19.4238%2024.7644%2019.0735%2025.0157%2018.663%2025.3504C18.2385%2025.6761%2017.8039%2026.1253%2017.3362%2026.6496C17.0934%2026.904%2016.8652%2027.194%2016.6493%2027.5032C16.4235%2027.8096%2016.1804%2028.1271%2015.9653%2028.4628C15.5431%2029.1468%2015.1142%2029.8712%2014.7722%2030.6298C14.3966%2031.374%2014.1415%2032.167%2013.8767%2032.8942C13.6751%2033.644%2013.4605%2034.3481%2013.3667%2034.9748C13.1242%2036.2185%2012.9306%2036.2076%2012.733%2035.8483C12.5355%2035.489%2012.348%2034.7904%2012.1142%2034.7422C12.0815%2036.0854%2012.0039%2037.0796%2011.9386%2038.093C11.9215%2038.5987%2011.9143%2039.107%2011.9299%2039.6638C11.9455%2040.2205%2012.0323%2040.8125%2012.1452%2041.4959C12.0984%2041.4988%2012.1322%2042.0079%2012.2496%2042.8503C12.3083%2043.2716%2012.3749%2043.7686%2012.4997%2044.3184C12.6244%2044.8682%2012.7277%2045.4858%2012.9252%2046.1239C13.5964%2048.6807%2014.9466%2051.7024%2016.0673%2053.5036C16.0673%2053.5036%2016.2765%2053.7925%2016.789%2054.5169C17.3129%2055.2339%2018.1302%2056.3838%2019.4895%2057.9874C20.4154%2059.0408%2020.5389%2058.9168%2020.6393%2058.8075C20.5658%2058.8786%2020.4936%2058.9517%2020.4228%2059.0271C21.0027%2059.4385%2021.7359%2060.1655%2022.4921%2060.8777C23.2425%2061.5937%2024.035%2062.2738%2024.6232%2062.6349C24.5644%2062.7205%2024.5089%2062.807%2024.4566%2062.8944C26.8374%2064.2938%2029.1328%2065.9907%2031.6941%2066.8607C31.6631%2066.9645%2031.6327%2067.0649%2031.6029%2067.162C32.2366%2067.404%2032.876%2067.6423%2033.3482%2067.8348C33.822%2068.0172%2034.1417%2068.1364%2034.1226%2068.2206C34.102%2068.3237%2034.0809%2068.4301%2034.0593%2068.5399C35.3419%2069.1491%2038.0208%2069.3411%2038.0002%2069.6512C38.0076%2069.5445%2038.0151%2069.4378%2038.0225%2069.3311C40.658%2069.7848%2042.9623%2069.8478%2045.0914%2069.7892C45.6257%2069.7619%2046.1461%2069.7256%2046.6591%2069.703C47.1689%2069.6375%2047.673%2069.5757%2048.1714%2069.5175C48.4185%2069.4853%2048.6656%2069.453%2048.9127%2069.4207C49.1574%2069.372%2049.4021%2069.3233%2049.6468%2069.2746C50.1322%2069.1708%2050.6117%2069.0707%2051.0971%2068.9669C53.6914%2068.3675%2056.3462%2067.2796%2058.8107%2065.6029C61.281%2063.9225%2063.4681%2061.6858%2065.1885%2059.1002C68.6506%2053.9243%2070.2586%2047.3987%2069.9047%2041.0406C69.8277%2039.6147%2069.4058%2038.2206%2069.1949%2039.615C69.1658%2038.923%2069.0702%2038.2286%2068.9705%2037.5278L68.8201%2036.4817L68.8061%2036.4726Z%22%20fill%3D%22%23767676%22%20fill-opacity%3D%220.13%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_242_2761%22%3E%3Crect%20width%3D%2261.3122%22%20height%3D%2255.3761%22%20fill%3D%22white%22%20transform%3D%22translate(34.0022%2081.4939)%20rotate(-122.627)%22%3E%3C%2Frect%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");
            mask-position: center;
            mask-size: contain;
            mask-repeat: no-repeat;
            position: absolute;
            width: 100%;
            height: 100%;
            right: 0;
            left: 0;
          }
        }
        .contents {
          text-align: center;
          width: 100%;
          h4 {
            font-size: 1rem;
            font-weight: 800;
          }
          p {
            font-size: 0.75rem;
            opacity: 0.5;
            margin: 0;
          }
        }
      }
    }
  
}