JSFiddle - React, Tailwind, and code Playground

by BramVanroy

HTML

<div class="bottom-section">
    <div class="parent-container">
        <div class="image-container">
            <img class="card-art" src="/img/application/cardarts/thumbnails/img.png"/>
        </div>
    </div>
</div>

CSS

.parent-container {
    padding-left: 0;
    width: 100%;
    padding-top: 68px;
    max-width: 970px;
    margin: 0;
    position: relative;
    border: 4px solid red;
}
.image-container {
    width: 173px;
    top: -69px;
    left: 50%;
    margin-left: -86px;
    max-width: 336px;
    overflow: hidden;
    position: absolute;
    border: 2px solid blue;
}
@media (min-width: 660px) {
    .parent-container {
        padding-top: 20px;
    }
    .image-container {
        left: 63%;
    }
}
@media (min-width: 831px) {
    .image-container {
        top: -91px;
        left: 80%;
        width: 30%;
    }
}
@media (min-width: 1280px) {
    .image-container {
        left: 85%;
    }
}
* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}