﻿@media all {
    #intro .header { margin-bottom:var(--spacing-2L); text-align:center; }
    #intro .header p.tag_line { font-size:var(--font-size-5L); text-transform:uppercase; }

    #intro ul.collection_list { gap:var(--spacing-2L); }

    #intro ul.collection_list li { position:relative; border-bottom:1px var(--color-blue) solid; }

    #intro ul.collection_list li:hover img { filter: grayscale(80%); transition: filter 1.0s ease; }
    #intro ul.collection_list li:hover .body { border-bottom:3px var(--color-blue) solid; animation: pulse-bg 0.6s ease-in-out infinite; }

    #intro ul.collection_list li a.property_link { position:absolute; top:0px; right:0px; bottom:0px; left:0px; z-index:1 }

    #intro ul.collection_list li .photo { background-color:var(--color-blue); }
    #intro ul.collection_list li .photo img {  display:block; margin:0px; width:100%; }

    #intro ul.collection_list li .body { padding-top:var(--spacing-1L); padding-bottom:var(--spacing-1L); background-position:right center; background-repeat:no-repeat; background-size:var(--font-size-2L); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23103256' d='M507.3 267.3c6.2-6.2 6.2-16.4 0-22.6l-144-144c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6L457.4 240 16 240c-8.8 0-16 7.2-16 16s7.2 16 16 16l441.4 0L340.7 388.7c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0l144-144z'/%3E%3C/svg%3E"); border-bottom:3px var(--color-white) solid;}

    #intro ul.collection_list li .body p.title { margin-bottom:0px; font-weight:var(--font-weight-bold); }
    #intro ul.collection_list li .body p.address { font-size:var(---font-size-1S); }

    @keyframes pulse-bg {
        0%   { background-size: var(--font-size-2L); }
        50%  { background-size: calc(var(--font-size-2L) * 1.2); }
        100% { background-size: var(--font-size-2L); }
    }
}

@media (max-width:1600px) {

}


@media (max-width:1400px) {

}

@media (max-width:1200px) {

}

@media (max-width:1000px) {

}

@media (max-width:760px) {

}

@media (max-width:600px) {
    #intro ul.collection_list { grid-template-columns:1fr; }
}