@import url('https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&display=swap');

*,
html,
body {
    margin: 0;
    padding: 0;
}

/* @link https://utopia.fyi/type/calculator?c=320,23,1.2,1240,26,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
    --step--2: clamp(0.9983rem, 0.9837rem + 0.0726vi, 1.04rem);
    --step--1: clamp(1.1979rem, 1.1624rem + 0.1775vi, 1.3rem);
    --step-0: clamp(1.4375rem, 1.3723rem + 0.3261vi, 1.625rem);
    --step-1: clamp(1.725rem, 1.6185rem + 0.5326vi, 2.0313rem);
    --step-2: clamp(2.07rem, 1.9068rem + 0.8158vi, 2.5391rem);
    --step-3: clamp(2.484rem, 2.2441rem + 1.1997vi, 3.1738rem);
    --step-4: clamp(2.9808rem, 2.6377rem + 1.7156vi, 3.9673rem);
    --step-5: clamp(3.577rem, 3.0962rem + 2.4037vi, 4.9591rem);
}

.main {
    display: flex;
    width: 100%;
    height: auto;
    justify-content: center;
    flex-direction: column;
    width: min(95%, 1200px);
    margin-inline: auto;
    font-family: 'PT Sans Narrow', sans-serif;

}

.header {
    padding-bottom: 1rem;
    font-weight: 400;
    font-size: var(--step-2);
    margin-inline: auto;
    color: black;
}

a {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s ease-in;
    
}

.grid {
    display: grid;
    place-items: center;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 3rem;
    height: min-content;
}

img {
    width: 100%;
}

.technical {
    width: 100%;
    height: 100%;

}

.title {
    font-size: var(--step-5);
    line-height: 75%;
    margin-block: .5ch;
    text-align: right;
    color: hsl(0, 0%, 20%);
}

.size,
.type {
    font-weight: 200;
    font-style: italic;
    font-size: var(--step--1);
    text-align: right;
}

.description {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: start;
    font-size: var(--step-1);
    font-weight: 400;
    margin-bottom: 1rem;

}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    font-style: italic;
    background-repeat: no-repeat;
    background-size: cover;
    shape-margin: 1rem;
}