Shopify Multi Column Blog Stylish Adventure Showcase

                    <!-- 
========================================
Section Name: Mountain Tours Blog
Tech Stack: Liquid, HTML, CSS, JavaScript
What This Section Does: 
- Displays a stylish grid of cards showcasing tours, adventures, and outdoor activities.
- Features three card types: image cards with gallery thumbnails, video cards with custom overlays, and link cards.
- Includes customizable tags, headings, and interactive elements for engaging user experience.
- Fully responsive design that adapts from mobile to desktop layouts with elegant styling.

Promotion: 
Showcase your outdoor adventures and tour offerings with this visually striking Mountain Tours section. Perfect for travel agencies, tour operators, and outdoor activity businesses. Get it now at [PrebuiltTemplates](https://prebuilttemplates.com/).
========================================
-->
<section class="mountain-tours-section" id="section-{{ section.id }}">
  <main>
    <div class="heading">
      <h1>{{ section.settings.heading }}</h1>
      <aside>
        <p>{{ section.settings.subheading }}</p>
        <p>{{ section.settings.since_text }}</p>
      </aside>
    </div>
    <div class="container">
      {% for block in section.blocks %}
        {% case block.type %}
          {% when 'image_card' %}
            <div class="card" {{ block.shopify_attributes }}>
              <div class="card-inner">
                <div class="box">
                  <div class="imgBox">
                    {% if block.settings.image != blank %}
                      {{ block.settings.image | image_url: width: 800 | image_tag: loading: 'lazy', alt: block.settings.image.alt | default: block.settings.tag_text }}
                    {% else %}
                      {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
                    {% endif %}
                  </div>
                  {% if block.settings.show_gallery %}
                    <div class="more">
                      <ul>
                        {% for i in (1..4) %}
                          {% assign image_field = 'gallery_image_' | append: i %}
                          {% if block.settings[image_field] != blank %}
                            <li>
                              {{ block.settings[image_field] | image_url: width: 100 | image_tag: loading: 'lazy' }}
                              {% if i == 4 and block.settings.gallery_count != blank %}
                                <span>{{ block.settings.gallery_count }}</span>
                              {% endif %}
                            </li>
                          {% endif %}
                        {% endfor %}
                      </ul>
                    </div>
                  {% endif %}
                  <div class="tag">
                    <a href="{{ block.settings.tag_link }}">{{ block.settings.tag_text }}</a>
                  </div>
                </div>
              </div>
            </div>
          {% when 'video_card' %}
            <div class="card video" {{ block.shopify_attributes }}>
              <div class="card-inner">
                <div class="box">
                  <div class="videoBox poster">
                    <iframe width="100%" height="100%" src="{{ block.settings.video_url }}" title="Video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                  </div>
                  <div class="tag">
                    <a href="{{ block.settings.tag_link }}">{{ block.settings.tag_text }}</a>
                  </div>
                </div>
              </div>
            </div>
          {% when 'link_card' %}
            <div class="card" {{ block.shopify_attributes }}>
              <p><a href="{{ block.settings.more_link }}">{{ block.settings.more_text }}</a></p>
              <div class="card-inner">
                <div class="box">
                  <div class="imgBox">
                    {% if block.settings.image != blank %}
                      {{ block.settings.image | image_url: width: 800 | image_tag: loading: 'lazy', alt: block.settings.image.alt | default: block.settings.tag_text }}
                    {% else %}
                      {{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
                    {% endif %}
                  </div>
                  <div class="more">
                    <a href="{{ block.settings.arrow_link }}" class="arrow">
                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
                      </svg>
                    </a>
                  </div>
                  <div class="tag">
                    <a href="{{ block.settings.tag_link }}">{{ block.settings.tag_text }}</a>
                  </div>
                </div>
              </div>
            </div>
        {% endcase %}
      {% endfor %}
    </div>
  </main>
</section>

<style>
  @import url("https://fonts.googleapis.com/css2?family=Moderustic&family=SUSE:wght@600&display=swap");

  #section-{{ section.id }} {
    --clr-white: {{ section.settings.background_color }};
    --clr-black: {{ section.settings.text_color }};
    --accent-color: {{ section.settings.accent_color }};
  }

  #section-{{ section.id }} * {
    margin: 0;
    padding: 0;
  }

  #section-{{ section.id }} main {
    padding-block: min(20vh, 2rem);
    width: calc(min(70rem, 90%));
    margin-inline: auto;
    color: var(--clr-black);
    position: relative;
  }

  @media screen and (min-width: 40rem) {
    #section-{{ section.id }} .heading {
      display: flex;
      justify-content: space-between;
      gap: 1em;
    }
  }

  #section-{{ section.id }} .heading h1 {
    letter-spacing: 0.025em;
    font-size: clamp(2.5rem, 1.6351rem + 4.3243vw, 6.5rem);
    line-height: 1;
    font-weight: 600;
  }

  #section-{{ section.id }} .heading aside {
    margin-top: 1.5em;
    max-width: 16.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
  }

  @media screen and (min-width: 40rem) {
    #section-{{ section.id }} .heading aside {
      margin-top: 3em;
    }
  }

  #section-{{ section.id }} .heading aside p {
    font-size: 0.9rem;
    color: var(--clr-black);
    line-height: 1.5;
  }

  #section-{{ section.id }} .container {
    margin-top: 2em;
    display: grid;
    gap: 1.5rem;
  }

  @media screen and (min-width: 40rem) {
    #section-{{ section.id }} .container {
      grid-template-columns: repeat(3, 1fr);
      margin-top: 3.5em;
      gap: 2rem;
    }
  }

  #section-{{ section.id }} .card {
    padding-block: 1rem;
    background: var(--clr-white);
    border-radius: 1.2rem;
    position: relative;
    height: 24rem;
  }

  @media screen and (min-width: 53rem) {
    #section-{{ section.id }} .card {
      border-radius: 1.8rem;
    }
  }

  #section-{{ section.id }} .card p {
    position: absolute;
    right: 0;
    top: -1.25rem;
    z-index: 2;
  }

  #section-{{ section.id }} .card p a {
    font-size: 0.9rem;
    display: inline-block;
    color: var(--clr-black);
    text-decoration: none;
  }

  #section-{{ section.id }} .card p a:hover {
    font-weight: 600;
  }

  #section-{{ section.id }} .card-inner {
    position: relative;
    width: inherit;
    height: inherit;
    border-bottom-right-radius: 0;
  }

  #section-{{ section.id }} .box {
    width: 100%;
    height: 100%;
    background: var(--clr-white);
    border-radius: 1.2rem;
    overflow: hidden;
  }

  #section-{{ section.id }} .videoBox {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  #section-{{ section.id }} .videoBox iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: none;
  }

  #section-{{ section.id }} .imgBox {
    position: absolute;
    inset: 0;
  }

  #section-{{ section.id }} .imgBox img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1rem;
  }

  @media screen and (min-width: 53rem) {
    #section-{{ section.id }} .imgBox img {
      border-radius: 1.6rem;
    }
  }

  #section-{{ section.id }} .more {
    position: absolute;
    top: -0.375rem;
    right: 0;
    width: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--clr-white);
    padding: 0.625rem 0 0.625rem 0.625rem;
    border-bottom-left-radius: 1rem;
    z-index: 1;
  }

  #section-{{ section.id }} .more::before {
    position: absolute;
    content: "";
    top: 0.375rem;
    left: -1.188rem;
    background: transparent;
    width: 1.2rem;
    height: 1.2rem;
    border-bottom-right-radius: 2rem;
    box-shadow: 0.313rem 0.313rem 0px 0.313rem var(--clr-white);
    transform: rotate(-90deg);
  }

  #section-{{ section.id }} .more::after {
    position: absolute;
    content: "";
    bottom: -1.188rem;
    right: -0.063rem;
    background: transparent;
    width: 1.2rem;
    height: 1.2rem;
    border-bottom-right-radius: 1rem;
    box-shadow: 0.313rem 0.313rem 0px 0.313rem var(--clr-white);
    transform: rotate(-90deg);
  }

  #section-{{ section.id }} ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
    display: flex;
    align-items: center;
  }

  #section-{{ section.id }} ul li {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--clr-white);
    position: relative;
    transform: translatey(0);
    transition: 0.2s ease-in-out;
  }

  #section-{{ section.id }} ul li:hover {
    transform: translatey(-0.625rem);
    cursor: pointer;
  }

  #section-{{ section.id }} ul li::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: hsl(0deg 0% 6.67% / 20%);
  }

  #section-{{ section.id }} ul li span {
    position: absolute;
    width: 100%;
    height: 100%;
    font-size: 0.6rem;
    color: var(--clr-white);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #section-{{ section.id }} ul li + li {
    margin-left: -0.625rem;
  }

  #section-{{ section.id }} ul img {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }

  #section-{{ section.id }} .arrow {
    width: 2.5rem;
    height: 2.5rem;
    border: 0.125rem solid #c8c8c8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s ease-in-out;
  }

  #section-{{ section.id }} .arrow:hover {
    background: var(--clr-black);
    border: 0.125rem solid var(--clr-black);
    color: var(--clr-white);
  }

  #section-{{ section.id }} .arrow:hover svg {
    color: var(--clr-white);
  }

  #section-{{ section.id }} .arrow svg {
    width: 1.063rem;
    color: var(--clr-black);
  }

  #section-{{ section.id }} .tag {
    position: absolute;
    bottom: -0.375rem;
    left: 0;
    width: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--clr-white);
    padding: 0.625rem 0.625rem 0.625rem 0;
    border-top-right-radius: 1rem;
    z-index: 1;
  }

  #section-{{ section.id }} .tag::before {
    position: absolute;
    content: "";
    top: -1.188rem;
    left: 0;
    background: transparent;
    width: 1.2rem;
    height: 1.2rem;
    border-bottom-right-radius: 2rem;
    box-shadow: 0.313rem 0.313rem 0px 0.313rem var(--clr-white);
    transform: rotate(90deg);
  }

  #section-{{ section.id }} .tag::after {
    position: absolute;
    content: "";
    bottom: 0.375rem;
    right: -1.188rem;
    background: transparent;
    width: 1.2rem;
    height: 1.2rem;
    border-bottom-right-radius: 1rem;
    box-shadow: 0.313rem 0.313rem 0px 0.313rem var(--clr-white);
    transform: rotate(90deg);
  }

  #section-{{ section.id }} .tag a {
    font-size: 0.8rem;
    color: var(--clr-black);
    font-weight: 400;
    border: 0.125rem solid #c8c8c8;
    border-radius: 3.125rem;
    padding: 0.313rem 0.625rem;
    display: inline-block;
    cursor: pointer;
    transition: 0.2s ease-in-out;
    text-decoration: none;
  }

  #section-{{ section.id }} .tag a:hover {
    color: var(--clr-white);
    background: var(--clr-black);
    border: 0.125rem solid var(--clr-black);
  }

  #section-{{ section.id }} .video {
    height: 20rem;
    align-self: flex-end;
  }

  #section-{{ section.id }} .poster {
    position: relative;
    display: inline-flex;
  }

  #section-{{ section.id }} .poster:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: url("{{ section.settings.video_overlay | image_url }}");
    background-size: cover;
    transition: 1s ease;
    opacity: 0.8;
    cursor: pointer;
  }

  #section-{{ section.id }} .poster-active:after {
    opacity: 0;
    pointer-events: none;
  }

  #section-{{ section.id }} .placeholder-svg {
    width: 100%;
    height: 100%;
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const posters = document.querySelectorAll("#section-{{ section.id }} .poster");
    
    posters.forEach(function(poster) {
      poster.addEventListener("click", function() {
        this.classList.add("poster-active");
        const iframe = this.querySelector("iframe");
        if (iframe) {
          let src = iframe.src;
          if (src.indexOf('?') > -1) {
            iframe.src = src + "&autoplay=1";
          } else {
            iframe.src = src + "?autoplay=1";
          }
        }
      });
    });
  });
</script>
{% schema %}
{
  "name": "Mountain Tours Blog",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
    },
    {
      "type": "textarea",
      "id": "subheading",
      "label": "Subheading",
      "default": "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
    },
    {
      "type": "text",
      "id": "since_text",
      "label": "Since text",
      "default": "Since 2021"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text color",
      "default": "#111111"
    },
    {
      "type": "color",
      "id": "accent_color",
      "label": "Accent color",
      "default": "#ff6b6b"
    },
    {
      "type": "image_picker",
      "id": "video_overlay",
      "label": "Video overlay image"
    }
  ],
  "blocks": [
    {
      "type": "image_card",
      "name": "Image Card",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "text",
          "id": "tag_text",
          "label": "Tag text",
          "default": "#Awesome views"
        },
        {
          "type": "url",
          "id": "tag_link",
          "label": "Tag link"
        },
        {
          "type": "checkbox",
          "id": "show_gallery",
          "label": "Show gallery thumbnails",
          "default": true
        },
        {
          "type": "image_picker",
          "id": "gallery_image_1",
          "label": "Gallery image 1"
        },
        {
          "type": "image_picker",
          "id": "gallery_image_2",
          "label": "Gallery image 2"
        },
        {
          "type": "image_picker",
          "id": "gallery_image_3",
          "label": "Gallery image 3"
        },
        {
          "type": "image_picker",
          "id": "gallery_image_4",
          "label": "Gallery image 4"
        },
        {
          "type": "text",
          "id": "gallery_count",
          "label": "Additional images count",
          "default": "50+"
        }
      ]
    },
    {
      "type": "video_card",
      "name": "Video Card",
      "settings": [
        {
          "type": "text",
          "id": "video_url",
          "label": "Video URL",
          "default": "https://www.youtube.com/embed/5D8TBicNIb8?si=x658Sysm10QHsnof&controls=0",
          "info": "Use YouTube or Vimeo embed URL"
        },
        {
          "type": "text",
          "id": "tag_text",
          "label": "Tag text",
          "default": "#Pet friendly"
        },
        {
          "type": "url",
          "id": "tag_link",
          "label": "Tag link"
        }
      ]
    },
    {
      "type": "link_card",
      "name": "Link Card",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "text",
          "id": "more_text",
          "label": "More text",
          "default": "More about tours"
        },
        {
          "type": "url",
          "id": "more_link",
          "label": "More link"
        },
        {
          "type": "url",
          "id": "arrow_link",
          "label": "Arrow link"
        },
        {
          "type": "text",
          "id": "tag_text",
          "label": "Tag text",
          "default": "#Hiking"
        },
        {
          "type": "url",
          "id": "tag_link",
          "label": "Tag link"
        }
      ]
    },
    {
      "type": "blog_card",
      "name": "Blog Card",
      "settings": [
        {
          "type": "blog",
          "id": "blog",
          "label": "Blog"
        },
        {
          "type": "range",
          "id": "post_limit",
          "min": 1,
          "max": 5,
          "step": 1,
          "label": "Posts to show",
          "default": 3
        },
        {
          "type": "select",
          "id": "card_type",
          "label": "Card type",
          "options": [
            {
              "value": "image",
              "label": "Image card"
            },
            {
              "value": "link",
              "label": "Link card"
            }
          ],
          "default": "image"
        },
        {
          "type": "text",
          "id": "tag_prefix",
          "label": "Tag prefix",
          "default": "#"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Mountain Tours Blog",
      "blocks": [
        {
          "type": "image_card"
        },
        {
          "type": "video_card"
        },
        {
          "type": "link_card"
        }
      ]
    }
  ]
}
{% endschema %}