[scss]화면 크기에 따라 이미지 비율 조절

크림 사이트 화면

간격은 유지하고 이미지 크기 조절

이미지 비율에 따라 padding-bottom 조절
현재 요구사항은 width:100px 일 때 hegith:64px

        <div class="container">
            <a href="#">
                <div class="img_wrap">
                    <img src="https://dummyimage.com/300x200/000/fff" alt="이미지1" />
                </div>
                <p class="name">이미지1</p>
            </a>
            <a href="#">
                <div class="img_wrap">
                    <img src="https://dummyimage.com/300x200/000/fff" alt="이미지1" />
                </div>
                <p class="name">이미지1</p>
            </a>
            <a href="#">
                <div class="img_wrap">
                    <img src="https://dummyimage.com/300x200/000/fff" alt="이미지1" />
                </div>
                <p class="name">이미지1</p>
            </a>
           	<a href="#">
                <div class="img_wrap">
                    <img src="https://dummyimage.com/300x200/000/fff" alt="이미지1" />
                </div>
                <p class="name">이미지1</p>
            </a>
        </div>

    .container {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 16px 8px;
        a {
            display: block;
            width: calc((100% - 8px) / 2);
        }
        .img_wrap {
            position: relative;
            width: 100%;
            height: 0;
            padding-bottom: 64%;
            overflow: hidden;
            border-radius: 6px;
            img {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                width: 100%;
                height: 100%;
                z-index: 1;
                object-fit: cover;
            }
            &::before{
                content: "";
                @include thumOverDeem;
            }
        }
        .name {
            margin-top: 8px;
            font-size: 12px;
            font-weight: $fw-regular;
            line-height: 1.33;
            color: $gray2;
            text-align: center;
            @include single-ellipsis;
        }
    }